refactor(js): perf nestedScrollPriority demo & docs (Tencent#9)

* refactor(js): perf nestedScrollPriority demo & docs * refactor(js): add nested scroll more pager item
hippy-contrib · Feb 1, 2023 · d300dd3 · d300dd3
1 parent 520383e
commit d300dd3
Show file tree

Hide file tree

Showing 13 changed files with 234 additions and 245 deletions.
diff --git a/docs/en-us/hippy-react/components.md b/docs/en-us/hippy-react/components.md
diff --git a/docs/en-us/hippy-vue/components.md b/docs/en-us/hippy-vue/components.md
diff --git a/docs/hippy-react/components.md b/docs/hippy-react/components.md
diff --git a/docs/hippy-vue/components.md b/docs/hippy-vue/components.md
@@ -67,11 +67,11 @@
 | showsHorizontalScrollIndicator | 当此值设为 `false` 的时候，`ScrollView` 会隐藏水平的滚动条。`default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`                                                    | `iOS`    |
 | showsVerticalScrollIndicator   | 当此值设为 `false` 的时候，`ScrollView` 会隐藏垂直的滚动条。 `default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`  | `iOS`   |
 | nativeBackgroundAndroid        | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue) | `Object`| `Android`    |
-| nestedScrollPriority*          | 嵌套滚动事件处理优先级，`default:self`。相当于同时设置 `nestedScrollLeftPriority`、 `nestedScrollTopPriority`、 `nestedScrollRightPriority`、 `nestedScrollBottomPriority`。 | `enum(self,parent,none)`         | ``Android(版本 2.16.0以上)`` |
-| nestedScrollLeftPriority       | **从右往左**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)`         | `Android(版本 2.16.0以上)` |
-| nestedScrollTopPriority        | **从下往上**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollRightPriority | **从左往右**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollBottomPriority | **从上往下**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
+| nestedScrollPriority*          | 嵌套滚动事件处理优先级，`default:self`。相当于同时设置 `nestedScrollLeftPriority`、 `nestedScrollTopPriority`、 `nestedScrollRightPriority`、 `nestedScrollBottomPriority`。 `最低支持版本 2.16.0` | `enum(self,parent,none)`    | `Android` |
+| nestedScrollLeftPriority | 嵌套时**从右往左**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                              | `enum(self,parent,none)` | `Android` |
+| nestedScrollTopPriority | 嵌套时**从下往上**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                         | `enum(self,parent,none)` | `Android` |
+| nestedScrollRightPriority | 嵌套时**从左往右**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                         | `enum(self,parent,none)` | `Android` |
+| nestedScrollBottomPriority | 嵌套时**从上往下**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                          | `enum(self,parent,none)` | `Android` |
 
 * nestedScrollPriority 的参数含义：
 
@@ -368,11 +368,11 @@ Hippy 的重点功能，高性能的可复用列表组件，在终端侧会被
 | endReached | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `endReached` 回调。 | `Function`                                                  | `Android、iOS、Web-Renderer`    |
 | editable | 是否可编辑，开启侧滑删除时需要设置为 `true`。`最低支持版本2.9.0` | `boolean`                                                  | `iOS`    |
 | delText | 侧滑删除文本。`最低支持版本2.9.0` | `string`                                                  | `iOS`    |
-| nestedScrollPriority*      | 嵌套滚动事件处理优先级，`default:self`。相当于同时设置 `nestedScrollLeftPriority`、 `nestedScrollTopPriority`、 `nestedScrollRightPriority`、 `nestedScrollBottomPriority`。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollLeftPriority   | **从右往左**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollTopPriority | **从下往上**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollRightPriority | **从左往右**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
-| nestedScrollBottomPriority | **从上往下**的嵌套滚动事件的处理优先级，参数含义同`nestedScrollPriority`，此参数优先级更高。 | `enum(self,parent,none)` | `Android(版本 2.16.0以上)` |
+| nestedScrollPriority*          | 嵌套滚动事件处理优先级，`default:self`。相当于同时设置 `nestedScrollLeftPriority`、 `nestedScrollTopPriority`、 `nestedScrollRightPriority`、 `nestedScrollBottomPriority`。 `最低支持版本 2.16.0` | `enum(self,parent,none)`    | `Android` |
+| nestedScrollLeftPriority | 嵌套时**从右往左**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                              | `enum(self,parent,none)` | `Android` |
+| nestedScrollTopPriority | 嵌套时**从下往上**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                         | `enum(self,parent,none)` | `Android` |
+| nestedScrollRightPriority | 嵌套时**从左往右**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                         | `enum(self,parent,none)` | `Android` |
+| nestedScrollBottomPriority | 嵌套时**从上往下**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0`                                                                                                          | `enum(self,parent,none)` | `Android` |
 
 * nestedScrollPriority 的参数含义：
 
@@ -425,15 +425,15 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 
 > 当设置`ul` 的 `:horizontal=true` 启用横向无限列表时，需显式设置 `li` 样式宽度
 
-| 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
-| --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
-| type            | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。`注意：同一 type 的 item 组件由于复用可能不会走完整组件创建生命周期` | `number`              | `Android、iOS、Web-Renderer`    |
-| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官文](//cn.vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS、Web-Renderer`    |
-| sticky       | 对应的 item 是否需要使用悬停效果（滚动到顶部时，会悬停在 ListView 顶部，不会滚出屏幕），需跟 `ul` 的 `rowShouldSticky` 配合使用 | `boolean`                                | `Android、iOS、Web-Renderer`
-| appear       | 当有`li`节点滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer` |
-| disappear       | 当有`li`节点滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer` |
-| willAppear       | 当有`li`节点至少一个像素滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `Android、iOS` |
-| willDisappear       | 当有`li`节点至少一个像素滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `Android、iOS` |
+| 参数            | 描述                                                                                                                            | 类型               | 支持平台                       |
+|---------------|-------------------------------------------------------------------------------------------------------------------------------|------------------|----------------------------|
+| type          | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。`注意：同一 type 的 item 组件由于复用可能不会走完整组件创建生命周期` | `number`         | `Android、iOS、Web-Renderer` |
+| key           | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官文](//cn.vuejs.org/v2/guide/list.html)                                                        | `string`         | `Android、iOS、Web-Renderer` |
+| sticky        | 对应的 item 是否需要使用悬停效果（滚动到顶部时，会悬停在 ListView 顶部，不会滚出屏幕），需跟 `ul` 的 `rowShouldSticky` 配合使用                                          | `boolean`        | `Android、iOS、Web-Renderer` |
+| appear        | 当有`li`节点滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。                                                                                     | `(index) => any` | `Android、iOS、Web-Renderer` |
+| disappear     | 当有`li`节点滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。                                                                                         | `(index) => any` | `Android、iOS、Web-Renderer` |
+| willAppear    | 当有`li`节点至少一个像素滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。`最低支持版本2.3.0`                                                                  | `(index) => any` | `Android、iOS`              |
+| willDisappear | 当有`li`节点至少一个像素滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。`最低支持版本2.3.0`                                                                      | `(index) => any` | `Android、iOS`              |
 
 ---
 

diff --git a/examples/android-demo/res/index.android.js b/examples/android-demo/res/index.android.js
diff --git a/examples/android-demo/res/vendor.android.js b/examples/android-demo/res/vendor.android.js
diff --git a/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx b/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx
@@ -46,15 +46,15 @@ const styles = StyleSheet.create({
   itemEvenText: {
     lineHeight: 40,
     color: 'white',
-    fontSize: 25,
+    fontSize: 20,
     textAlign: 'center',
   },
   itemOdd: {
     height: 40,
   },
   itemOddText: {
     lineHeight: 40,
-    fontSize: 25,
+    fontSize: 20,
     textAlign: 'center',
   },
 });
@@ -64,7 +64,6 @@ export default class NestedScrollExample extends React.Component {
     super(props);
     this.state = {
       layoutHeight: 0,
-      bannerHeight: 80,
       currentSlide: 0,
     };
   }
@@ -75,51 +74,51 @@ export default class NestedScrollExample extends React.Component {
   }
 
   render() {
-    const { layoutHeight, bannerHeight, currentSlide } = this.state;
-    console.log('currentSlide', currentSlide);
+    const { layoutHeight, currentSlide } = this.state;
     return (
       <ScrollView
         style={styles.demoWrap}
         scrollEventThrottle={50}
-        onLayout={e => this.setState({ layoutHeight: e.layout.height })}
-        onScroll={e => this.setState({ bannerHeight: Math.min(150 - e.contentOffset.y, 80) })}>
+        onLayout={e => this.setState({ layoutHeight: e.layout.height })} >
         <View style={styles.banner}>
-          <Text style={[styles.bannerText, { height: bannerHeight, fontSize: bannerHeight }]}>
-            Banner
-          </Text>
         </View>
         <View style={styles.tabs}>
           <Text
             key="tab1"
             style={(currentSlide === 0) ? styles.tabSelected : styles.tabText}
             onClick={() => this.selectPage(0)}>
-            tab 1
+            tab 1 (parent first)
           </Text>
           <Text
             key="tab2"
             style={(currentSlide === 1) ? styles.tabSelected : styles.tabText}
             onClick={() => this.selectPage(1)}>
-            tab 2
+            tab 2 (self first)
           </Text>
         </View>
         <ViewPager
           ref={ref => this.viewPager = ref}
           initialPage={currentSlide}
           style={{ height: layoutHeight - 80 }}
           onPageSelected={e => this.setState({ currentSlide: e.position })}>
-          <ListView nestedScrollTopPriority="parent" key="slide1"
+          <ListView nestedScrollTopPriority={'parent'} key={'slide1'}
             numberOfRows={30}
             getRowKey={i => `item${i}`}
+            initialListSize={30}
             renderRow={i => (
               <Text style={i % 2 ? styles.itemEvenText : styles.itemOddText}>Item {i}</Text>
             )}
             getRowStyle={i => (i % 2 ? styles.itemEven : styles.itemOdd)}
           />
-          <View key="slide2" style={{ flex: 1, justifyContent: 'space-around' }}>
-            <Text style={{ textAlign: 'center' }}>
-              I&apos;m Slide 2
-            </Text>
-          </View>
+          <ListView nestedScrollTopPriority={'self'} key={'slide2'}
+                    numberOfRows={30}
+                    getRowKey={i => `item${i}`}
+                    initialListSize={30}
+                    renderRow={i => (
+                        <Text style={i % 2 ? styles.itemEvenText : styles.itemOddText}>Item {i}</Text>
+                    )}
+                    getRowStyle={i => (i % 2 ? styles.itemEven : styles.itemOdd)}
+          />
         </ViewPager >
       </ScrollView >);
   }

diff --git a/examples/hippy-vue-demo/src/components/native-demos/demo-nested-scroll.vue b/examples/hippy-vue-demo/src/components/native-demos/demo-nested-scroll.vue
@@ -1,24 +1,18 @@
 <template>
   <div
     id="demo-wrap"
-    scrollEventThrottle="50"
-    @layout="onlayout"
-    @scroll="onscroll"
+    @layout="onLayout"
   >
     <div id="demo-content">
-      <div id="banner">
-        <p :style="{ height: bannerHeight, 'font-size': bannerHeight, }">
-          Banner
-        </p>
-      </div>
+      <div id="banner" />
       <div id="tabs">
         <p
           v-for="n in 2"
           :key="('tab' + n)"
           :class="(currentSlide === n - 1) ? 'selected' : ''"
-          @click="ontabclick(n)"
+          @click="onTabClick(n)"
         >
-          tab {{ n }}
+          tab {{ n }} {{ n === 1 ? '(parent first)' : '(self first)' }}
         </p>
       </div>
       <swiper
@@ -27,9 +21,8 @@
         need-animation
         :current="currentSlide"
         :style="{ height: layoutHeight - 80 }"
-        @dropped="ondropped"
+        @dropped="onDropped"
       >
-        <!-- slides -->
         <swiper-slide key="slide1">
           <ul nestedScrollTopPriority="parent">
             <li
@@ -42,11 +35,15 @@
           </ul>
         </swiper-slide>
         <swiper-slide key="slide2">
-          <div style="flex: 1; justify-content: space-around">
-            <p style="text-align: center">
-              I'm Slide 2
-            </p>
-          </div>
+          <ul nestedScrollTopPriority="self">
+            <li
+              v-for="n in 30"
+              :key="('item' + n)"
+              :class="(n % 2) ? 'item-even' : 'item-odd'"
+            >
+              <p>Item {{ n }}</p>
+            </li>
+          </ul>
         </swiper-slide>
       </swiper>
     </div>
@@ -58,22 +55,18 @@ export default {
   data() {
     return {
       layoutHeight: 0,
-      bannerHeight: 80,
       currentSlide: 0,
     };
   },
   methods: {
-    onlayout(e) {
+    onLayout(e) {
       this.layoutHeight = e.height;
     },
-    onscroll(e) {
-      this.bannerHeight = Math.min(150 - e.offsetY, 80);
-    },
-    ontabclick(i) {
+    onTabClick(i) {
       console.log('onclick', i);
       this.currentSlide = i - 1;
     },
-    ondropped(e) {
+    onDropped(e) {
       this.currentSlide = e.currentSlide;
     },
   },
@@ -91,9 +84,9 @@ export default {
 }
 
 #banner {
-    background-image: url(https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png);
+    background-image: url('https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png');
     background-size: cover;
-    height: 150;
+    height: 150px;
     justify-content: flex-end;
 }
 
@@ -104,7 +97,7 @@ export default {
 
 #tabs {
     flex-direction: row;
-    height: 30;
+    height: 30px;
 }
 
 #tabs p {
@@ -119,24 +112,24 @@ export default {
 }
 
 .item-even {
-    height: 40;
+    height: 40px;
 }
 
 .item-even p {
-    line-height: 40;
-    font-size: 25;
+    line-height: 40px;
+    font-size: 20px;
     text-align: center;
 }
 
 .item-odd {
-    height: 40;
+    height: 40px;
     background-color: gray;
 }
 
 .item-odd p {
-    line-height: 40;
+    line-height: 40px;
     color: white;
-    font-size: 25;
+    font-size: 20px;
     text-align: center;
 }
 </style>
diff --git a/examples/hippy-vue-demo/src/components/native-demos/index.js b/examples/hippy-vue-demo/src/components/native-demos/index.js
@@ -36,14 +36,14 @@ if (Vue.Native) {
       name: 'waterfall 组件',
       component: demoWaterfall,
     },
+    demoNestedScroll: {
+      name: 'nested scroll 示例',
+      component: demoNestedScroll,
+    },
     demoSetNativeProps: {
       name: 'setNativeProps',
       component: demoSetNativeProps,
     },
-    demoNestedScroll: {
-      name: 'Nested Scroll 示例',
-      component: demoNestedScroll,
-    },
   });
 }