fix #1 支持一个页面多个长列表

cunjinli · cunjinli · commit 8f35edb73233 · 2019-08-24T18:03:39.000+08:00
diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@
 
 ​ 假设列表数据有100个 item，知道了滚动的位置，怎么知道哪些 item 必须显示在页面？因为 item 还没渲染出来，不能通过 getComputedStyle 等 DOM 操作得到每个 item 的位置，所以无法知道哪些 item 需要渲染。为了解决这个问题，需要每个 item 固定宽高。item 的宽高的定义见下面的 API 的`createRecycleContext()`的参数 itemSize 的介绍。
 
+​ 滚动过程中，重新渲染数据的同时，需要设置当前数据的前后的 div 占位元素高度，同时是指在同一个渲染周期内。页面渲染是通过 setData 触发的，列表数据和 div 占位高度在2个组件内进行 setData 的，为了把这2个 setData 放在同一个渲染周期，用了一个 hack 方法，所以定义 recycle-view 的 batch 属性固定为`batch="{{batchSetRecycleData}}"`。
+
 ​ 在滚动过程中，为了避免频繁出现白屏，会多渲染当前屏幕的前后2个屏幕的内容。
 
 ## 包结构
@@ -63,7 +65,7 @@ npm install --save miniprogram-recycle-view
 3. WXML 文件中引用 recycle-view
 
    ```xml
-   <recycle-view id="recycleId">
+   <recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
      <view slot="before">长列表前面的内容</view>
      <recycle-item wx:for="{{recycleList}}" wx:key="id">
        <view>
@@ -80,6 +82,7 @@ npm install --save miniprogram-recycle-view
    | 字段名                | 类型    | 必填 | 描述                                      |
    | --------------------- | ------- | ---- | ----------------------------------------- |
    | id                    | String  | 是   | id必须是页面唯一的字符串                  |
+   | batch                 | Boolean | 是   | 必须设置为{{batchSetRecycleData}}才能生效 |
    | height                | Number  | 否   | 设置recycle-view的高度，默认为页面高度    |
    | width                 | Number  | 否   | 设置recycle-view的宽度，默认是页面的宽度  |
    | enable-back-to-top    | Boolean | 否   | 默认为false，同scroll-view同名字段        |
@@ -175,15 +178,22 @@ npm install --save miniprogram-recycle-view
    }
    ```
 
-  
+   
+
    ## Tips
 
-   1. recycle-item的宽高必须和itemSize设置的宽高一致，否则会出现跳动的bug。
-   2. recycle-view设置的高度必须和其style里面设置的样式一致。
-   3. `createRecycleContext(options)`的id参数必须和recycle-view的id属性一致，dataKey参数必须和recycle-item的wx:for绑定的变量名一致。
-   4. 不能在recycle-item里面使用wx:for的index变量作为索引值的，请使用{{item.\_\_index\_\_}}替代。
-   5. 不要通过setData设置recycle-item的wx:for的变量值，建议recycle-item设置wx:key属性。
-   6. 如果长列表里面包含图片，必须保证图片资源是有HTTP缓存的，否则在滚动过程中会发起很多的图片请求。
-   7. 有些数据不一定会渲染出来，使用wx.createSelectorQuery的时候有可能会失效，可使用RecycleContext的getBoundingClientRect来替代。
-   8. 当使用了useInPage参数的时候，必须在Page里面定义onPageScroll事件。
-  9. transformRpx会进行四舍五入，所以`transformRpx(20) + transformRpx(90)`不一定等于`transformRpx(110)`
+   1. recycle-view设置batch属性的值必须为{{batchSetRecycleData}}。
+   2. recycle-item的宽高必须和itemSize设置的宽高一致，否则会出现跳动的bug。
+   3. recycle-view设置的高度必须和其style里面设置的样式一致。
+   4. `createRecycleContext(options)`的id参数必须和recycle-view的id属性一致，dataKey参数必须和recycle-item的wx:for绑定的变量名一致。
+   5. 不能在recycle-item里面使用wx:for的index变量作为索引值的，请使用{{item.\_\_index\_\_}}替代。
+   6. 不要通过setData设置recycle-item的wx:for的变量值，建议recycle-item设置wx:key属性。
+   7. 如果长列表里面包含图片，必须保证图片资源是有HTTP缓存的，否则在滚动过程中会发起很多的图片请求。
+   8. 有些数据不一定会渲染出来，使用wx.createSelectorQuery的时候有可能会失效，可使用RecycleContext的getBoundingClientRect来替代。
+   9. 当使用了useInPage参数的时候，必须在Page里面定义onPageScroll事件。
+  10. transformRpx会进行四舍五入，所以`transformRpx(20) + transformRpx(90)`不一定等于`transformRpx(110)`
+  11. 如果一个页面有多个长列表，必须多设置batch-key属性，每个的batch-key的值和batch属性的变量必须不一致。例如
+  ```html
+  <recycle-view batch="{{batchSetRecycleData}}" batch-key="batchSetRecycleData"></recycle-view>
+  <recycle-view batch="{{batchSetRecycleData1}}" batch-key="batchSetRecycleData1"></recycle-view>
+  ```
diff --git a/src/recycle-view.js b/src/recycle-view.js
@@ -1,15 +1,9 @@
 /* eslint complexity: ["error", {"max": 50}] */
 /* eslint-disable indent */
-let SHOW_SCREENS = 4
-let MAX_SHOW_SCREENS = 5 // 5和3刚好合适？
-const DEFAULT_SHOW_SCREENS = SHOW_SCREENS
-const DEFAULT_MAX_SHOW_SCREENS = MAX_SHOW_SCREENS
+const DEFAULT_SHOW_SCREENS = 4
 const RECT_SIZE = 200
 const systemInfo = wx.getSystemInfoSync()
 const DEBUG = false
-const BOUNDARY_INTERVAL = 400 // 到达边界多少距离的时候, 直接改为边界位置
-const SETDATA_INTERVAL_BOUNDARY = 300 // 大于300ms则减少MAX_SHOW_SCREEN的值
-const SETDATA_INTERVAL_BOUNDARY_1 = 500
 const transformRpx = require('./utils/transformRpx.js').transformRpx
 
 Component({
@@ -57,6 +51,17 @@ Component({
       type: Boolean,
       value: true,
     },
+    batch: {
+      type: Boolean,
+      value: false,
+      public: true,
+      observer: '_recycleInnerBatchDataChanged'
+    },
+    batchKey: {
+      type: String,
+      value: 'batchSetRecycleData',
+      public: true,
+    },
     scrollTop: {
       type: Number,
       value: 0,
@@ -115,6 +120,11 @@ Component({
       type: String,
       public: true,
       value: ''
+    },
+    screen: { // 默认渲染多少屏的数据
+      type: Number,
+      public: true,
+      value: DEFAULT_SHOW_SCREENS
     }
   },
 
@@ -156,7 +166,6 @@ Component({
         }
       }, true)
     })
-    this._totalTime = this._totalCount = 0
   },
   detached() {
     this.page = null
@@ -165,7 +174,6 @@ Component({
       this.context.destroy()
       this.context = null
     }
-    if (this.timerId) clearTimeout(this.timerId)
   },
   /**
    * 组件的方法列表
@@ -186,7 +194,6 @@ Component({
       this.triggerEvent('scrolltolower', e.detail)
     },
     _beginToScroll() {
-      this._lastRenderTime = Date.now()
       if (!this._lastScrollTop) {
         this._lastScrollTop = this._pos && (this._pos.top || 0)
       }
@@ -235,39 +242,14 @@ Component({
       const that = this
       const scrollLeft = e.detail.scrollLeft
       const scrollTop = e.detail.scrollTop
-      let isMatchBoundary = false
-      if (scrollTop - BOUNDARY_INTERVAL < 0) {
-        // scrollTop = 0
-        isMatchBoundary = true
-      }
-      if (this.totalHeight - scrollTop - BOUNDARY_INTERVAL < this.data.height) {
-        // scrollTop = this.totalHeight - this.data.height
-        // isMatchBoundary = true
-      }
-      const usetime = Date.now() - this._lastRenderTime
       const scrollDistance = Math.abs(scrollTop - this._lastScrollTop)
 
       this._lastScrollTop = scrollTop
-      this._lastRenderTime = Date.now()
-      // 当scroll触发时间大于200ms且大于滚动距离，下一个滚动距离会极高，容易出现白屏，因此需要马上渲染
-      const isNextScrollExpose = false
-      // const mustRender = force || isMatchBoundary || isNextScrollExpose
-      const mustRender = force || isNextScrollExpose
-      this._log('scrollTop', e.detail.scrollTop, isMatchBoundary, mustRender)
-      if (!mustRender) {
-        if ((Math.abs(scrollTop - pos.top) < pos.height * 1.5)) {
-          this._log('【not exceed height')
-          return
-        }
-      }
-      if (force && this.timerId) {
-        clearTimeout(this.timerId)
-      }
-      SHOW_SCREENS = DEFAULT_SHOW_SCREENS // 固定4屏幕
-      this._log('SHOW_SCREENS', SHOW_SCREENS, scrollTop, isNextScrollExpose)
+      const SHOW_SCREENS = this.data.screen // 固定4屏幕
+      this._log('SHOW_SCREENS', SHOW_SCREENS, scrollTop)
       this._calcViewportIndexes(scrollLeft, scrollTop,
           (beginIndex, endIndex, minTop, afterHeight, maxTop) => {
-        that._log('scrollDistance', scrollDistance, 'usetime', usetime, 'indexes', beginIndex, endIndex)
+        that._log('scrollDistance', scrollDistance, 'indexes', beginIndex, endIndex)
         // 渲染的数据不变
         if (!force && pos.beginIndex === beginIndex && pos.endIndex === endIndex &&
             pos.minTop === minTop && pos.afterHeight === afterHeight) {
@@ -286,32 +268,12 @@ Component({
         pos.maxTop = maxTop
         pos.afterHeight = afterHeight
         pos.ignoreBeginIndex = pos.ignoreEndIndex = -1
-        pos.lastSetDataTime = Date.now() // 用于节流时间判断
-        that._isScrollRendering = true
-        const st = Date.now()
         that.page._recycleViewportChange({
           detail: {
             data: that._pos,
             id: that.id
           }
         }, () => {
-          that._isScrollRendering = false
-          if (that._totalCount < 5) {
-            that._totalCount++
-            that._totalTime += (Date.now() - st)
-          } else {
-            that._totalCount = 1
-            that._totalTime = (Date.now() - st)
-          }
-          pos.lastSetDataTime = 0 // 用于节流时间判断
-          // if (that._totalCount / that._totalTime <= SETDATA_INTERVAL_BOUNDARY) {
-          //   MAX_SHOW_SCREENS = DEFAULT_MAX_SHOW_SCREENS + 1 // 多渲染2个屏幕的内容
-          if (that._totalTime / that._totalCount > SETDATA_INTERVAL_BOUNDARY) {
-            that._log('【【SHOW_SCREENS 调整', that._totalCount / that._totalTime)
-            MAX_SHOW_SCREENS = DEFAULT_MAX_SHOW_SCREENS - 1
-          } else if (that._totalTime / that._totalCount > SETDATA_INTERVAL_BOUNDARY_1) {
-            MAX_SHOW_SCREENS = DEFAULT_MAX_SHOW_SCREENS - 2
-          }
           if (e.detail.cb) {
             e.detail.cb()
           }
@@ -405,6 +367,7 @@ Component({
       // top = Math.max(top, this.data.beforeSlotHeight)
       const beforeSlotHeight = this.data.beforeSlotHeight || 0
       // 和direction无关了
+      const SHOW_SCREENS = this.data.screen
       let minTop = top - pos.height * SHOW_SCREENS - beforeSlotHeight
       let maxTop = top + pos.height * SHOW_SCREENS - beforeSlotHeight
       // maxTop或者是minTop超出了范围
diff --git a/src/utils/viewport-change-func.js b/src/utils/viewport-change-func.js
@@ -24,26 +24,33 @@ module.exports = function (e, cb) {
     }
   }
   const obj = {
+    // batchSetRecycleData: !this.data.batchSetRecycleData
   }
   obj[item.key] = newList
   const comp = this.selectComponent('#' + detail.id)
+  obj[comp.data.batchKey] = !this.data.batchSetRecycleData
   comp._setInnerBeforeAndAfterHeight({
     beforeHeight: pos.minTop,
     afterHeight: pos.afterHeight
   })
+  this.setData(obj, () => {
+    if (typeof cb === 'function') {
+      cb()
+    }
+  })
   // Fix #1
   // 去掉了batchSetDataKey，支持一个页面内显示2个recycle-view
-  const groupSetData = () => {
-    this.setData(obj)
-    comp._recycleInnerBatchDataChanged(() => {
-      if (typeof cb === 'function') {
-        cb()
-      }
-    })
-  }
-  if (typeof this.groupSetData === 'function') {
-    this.groupSetData(groupSetData)
-  } else {
-    groupSetData()
-  }
+  // const groupSetData = () => {
+  //   this.setData(obj)
+  //   comp._recycleInnerBatchDataChanged(() => {
+  //     if (typeof cb === 'function') {
+  //       cb()
+  //     }
+  //   })
+  // }
+  // if (typeof this.groupSetData === 'function') {
+  //   this.groupSetData(groupSetData)
+  // } else {
+  //   groupSetData()
+  // }
 }
diff --git a/tools/demo/pages/index/index.wxml b/tools/demo/pages/index/index.wxml
@@ -1,6 +1,6 @@
 <!-- <button bindtap="showRecycleview1">showRecycleview</button> -->
 <!-- <button bindtap="hideRecycleview">hideRecycleview</button> -->
-<recycle-view class="recycle-list" placeholder-image="{{placeholderImage}}" bindscrolltolower="scrollToLower" scroll-with-animation="{{true}}" scroll-to-index="{{index}}" scroll-top="{{scrollTop}}" height="500" id="recycleId">
+<recycle-view class="recycle-list" placeholder-image="{{placeholderImage}}" bindscrolltolower="scrollToLower" scroll-with-animation="{{true}}" batch="{{batchSetRecycleData}}" batch-key="batchSetRecycleData" scroll-to-index="{{index}}" scroll-top="{{scrollTop}}" height="500" id="recycleId">
   <view slot="before" style=''>
     <button bindtap="scrollTo2000">scrollTo2000</button>
     <button bindtap="scrollTo0">scrollTo0</button>
