去掉batch属性,改成其他替代,避免#1问题;#26 加scrollY属性;#10

cunjinli · cunjinli · commit 52e33a9eeb0e · 2019-08-24T17:21:31.000+08:00
diff --git a/README.md b/README.md
@@ -20,8 +20,6 @@
 
 ​ 假设列表数据有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个屏幕的内容。
 
 ## 包结构
@@ -65,7 +63,7 @@ npm install --save miniprogram-recycle-view
 3. WXML 文件中引用 recycle-view
 
    ```xml
-   <recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
+   <recycle-view id="recycleId">
      <view slot="before">长列表前面的内容</view>
      <recycle-item wx:for="{{recycleList}}" wx:key="id">
        <view>
@@ -82,11 +80,11 @@ 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同名字段        |
    | scroll-top            | Number  | 否   | 默认为false，同scroll-view同名字段        |
+   | scroll-y              | Number  | 否   | 默认为true，同scroll-view同名字段        |
    | scroll-to-index       | Number  | 否   | 设置滚动到长列表的项                      |
    | placeholder-image     | String  | 否   | 默认占位背景图片，在渲染不及时的时候显示，不建议使用大图作为占位。建议传入SVG的Base64格式，可使用[工具](https://codepen.io/jakob-e/pen/doMoML)将SVG代码转为Base64格式。支持SVG中设置rpx。 |
    | scroll-with-animation | Boolean | 否   | 默认为false，同scroll-view的同名字段      |
@@ -103,7 +101,6 @@ npm install --save miniprogram-recycle-view
    | before    | 默认 slot 的前面的非回收区域                              |
    | 默认 slot | 长列表的列表展示区域，recycle-item 必须定义在默认 slot 中 |
    | after     | 默认 slot 的后面的非回收区域                              |
-   | itemsize  | 动态生成宽高的预先加载数据的slot                          |
 
    ​  长列表的内容实际是在一个 scroll-view 滚动区域里面的，当长列表里面的内容，不止是单独的一个列表的时候，例如我们页面底部都会有一个 copyright 的声明，我们就可以把这部分的内容放在 before 和 after 这2个 slot 里面。
 
@@ -178,17 +175,15 @@ npm install --save miniprogram-recycle-view
    }
    ```
 
-   
-
+  
    ## Tips
 
-   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)`
+   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)`
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "miniprogram-recycle-view",
-	"version": "0.0.8",
+	"version": "0.1.1",
 	"description": "miniprogram custom component",
 	"main": "miniprogram_dist/index.js",
 	"scripts": {
diff --git a/src/recycle-view.js b/src/recycle-view.js
@@ -53,10 +53,9 @@ Component({
       type: Boolean,
       value: false
     },
-    batch: {
+    scrollY: {
       type: Boolean,
-      value: false,
-      observer: '_recycleInnerBatchDataChanged'
+      value: true,
     },
     scrollTop: {
       type: Number,
@@ -550,20 +549,26 @@ Component({
       // 重新渲染事件发生
       let beforeReady = false
       let afterReady = false
-      this.createSelectorQuery().select('.slot-before').boundingClientRect((rect) => {
-        beforeSlotHeight = rect.height
-        beforeReady = true
-        if (afterReady) {
-          if (newCb) { newCb() }
-        }
-      }).exec()
-      this.createSelectorQuery().select('.slot-after').boundingClientRect((rect) => {
-        afterSlotHeight = rect.height
-        afterReady = true
-        if (beforeReady) {
-          if (newCb) { newCb() }
-        }
-      }).exec()
+      // Fix issue #16
+      this.setData({
+        hasBeforeSlotHeight: false,
+        hasAfterSlotHeight: false,
+      }, () => {
+        this.createSelectorQuery().select('.slot-before').boundingClientRect((rect) => {
+          beforeSlotHeight = rect.height
+          beforeReady = true
+          if (afterReady) {
+            if (newCb) { newCb() }
+          }
+        }).exec()
+        this.createSelectorQuery().select('.slot-after').boundingClientRect((rect) => {
+          afterSlotHeight = rect.height
+          afterReady = true
+          if (beforeReady) {
+            if (newCb) { newCb() }
+          }
+        }).exec()
+      })
     },
     _setInnerBeforeAndAfterHeight(obj) {
       if (typeof obj.beforeHeight !== 'undefined') {
@@ -573,7 +578,7 @@ Component({
         this._tmpAfterHeight = obj.afterHeight
       }
     },
-    _recycleInnerBatchDataChanged() {
+    _recycleInnerBatchDataChanged(cb) {
       if (typeof this._tmpBeforeHeight !== 'undefined') {
         const setObj = {
           innerBeforeHeight: this._tmpBeforeHeight || 0,
@@ -583,16 +588,27 @@ Component({
           setObj.innerScrollTop = this._tmpInnerScrollTop
         }
         const pageObj = {}
+        let hasPageData = false
         if (typeof this._currentSetDataKey !== 'undefined') {
           pageObj[this._currentSetDataKey] = this._currentSetDataList
-          this.page.setData(pageObj)
+          hasPageData = true
         }
         const saveScrollWithAnimation = this.data.scrollWithAnimation
-        this.setData(setObj, () => {
-          this.setData({
-            scrollWithAnimation: saveScrollWithAnimation
+        const groupSetData = () => {
+          // 如果有分页数据的话
+          if (hasPageData) {
+            this.page.setData(pageObj)
+          }
+          this.setData(setObj, () => {
+            this.setData({
+              scrollWithAnimation: saveScrollWithAnimation
+            })
+            if (typeof cb === 'function') {
+              cb()
+            }
           })
-        })
+        }
+        groupSetData()
         delete this._currentSetDataKey
         delete this._currentSetDataList
         this._tmpBeforeHeight = undefined
diff --git a/src/recycle-view.wxml b/src/recycle-view.wxml
@@ -1,6 +1,6 @@
 <!--components/recycle-view/recycle-view.wxml-->
 <view bindtouchstart='_beginToScroll' style="height:{{useInPage ? totalHeight : height}}px;width:{{width}}px;transform:translateZ(0);-webkit-transform:translateZ(0);" id="content" class="wrap">
-  <scroll-view bindscroll="_scrollViewDidScroll" class="content" style='height:100%;position: relative;' scroll-y="{{useInPage ? false : true}}" scroll-x="{{false}}" upper-threshold="{{upperThreshold}}" lower-threshold="{{lowerThreshold}}" scroll-top="{{innerScrollTop}}" scroll-into-view="{{innerScrollIntoView}}" scroll-with-animation="{{scrollWithAnimation}}" bindscrolltoupper="_scrollToUpper" bindscrolltolower="_scrollToLower" enable-back-to-top="{{enableBackToTop}}" throttle="{{throttle}}">
+  <scroll-view bindscroll="_scrollViewDidScroll" class="content" style='height:100%;position: relative;' scroll-y="{{useInPage ? false : true}}" scroll-x="{{scrollY}}" upper-threshold="{{upperThreshold}}" lower-threshold="{{lowerThreshold}}" scroll-top="{{innerScrollTop}}" scroll-into-view="{{innerScrollIntoView}}" scroll-with-animation="{{scrollWithAnimation}}" bindscrolltoupper="_scrollToUpper" bindscrolltolower="_scrollToLower" enable-back-to-top="{{enableBackToTop}}" throttle="{{throttle}}">
     <view style="position: absolute;z-index:1;width:100%;left: 0;top: 0;opacity: 0;visibility: hidden;">
       <slot name="itemsize"></slot>
     </view>
diff --git a/src/utils/recycle-context.js b/src/utils/recycle-context.js
@@ -359,7 +359,13 @@ RecycleContext.prototype._recalculateSize = function (list) {
     // 超过了宽度, 移动到下一行, 再根据高度判断是否需要移动到下一个方格
     if (offsetLeft + itemSize.width > compData.width) {
       offsetLeft = itemSize.width
-      offsetTop += sizeArray[sizeArray.length - 2].height // 加上最后一个数据的高度
+      // Fixed issue #22
+      if (sizeArray.length >= 2) {
+        offsetTop += sizeArray[sizeArray.length - 2].height || 0 // 加上最后一个数据的高度
+      } else {
+        offsetTop += itemSize.height
+      }
+      // offsetTop += sizeArray[sizeArray.length - 2].height // 加上最后一个数据的高度
       // 根据高度判断是否需要移动到下一个方格
       if (offsetTop >= RECT_SIZE * (line + 1)) {
         line += parseInt((offsetTop - RECT_SIZE * line) / RECT_SIZE, 10)
diff --git a/src/utils/viewport-change-func.js b/src/utils/viewport-change-func.js
@@ -24,21 +24,26 @@ module.exports = function (e, cb) {
     }
   }
   const obj = {
-    batchSetRecycleData: !this.data.batchSetRecycleData
   }
-  // const setDataStart = +new Date()
   obj[item.key] = newList
   const comp = this.selectComponent('#' + detail.id)
-  // comp.setList(item.key, newList)
   comp._setInnerBeforeAndAfterHeight({
     beforeHeight: pos.minTop,
     afterHeight: pos.afterHeight
   })
-  // console.log('before set recycleData')
-  this.setData(obj, function () {
-    if (typeof cb === 'function') {
-      cb()
-    }
-    // console.log('set recycleData data use time', Date.now() - setDataStart, JSON.stringify(pos))
-  })
+  // 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()
+  }
 }
diff --git a/tools/demo/pages/index/index.js b/tools/demo/pages/index/index.js
@@ -18,12 +18,11 @@ Page({
       id: 'recycleId',
       dataKey: 'recycleList',
       page: this,
-      itemSize: {
-        props: 'azFirst',
-        // cacheKey: 'cacheKey', // 预先缓存的key
-        queryClass: 'recycle-itemsize', // 动态查询的class
-        dataKey: 'recycleListItemSize', // 预先渲染的数据的wx:for绑定的变量
-        // componentClass: 'recycle-list'
+      itemSize: function(item, index) {
+        return {
+          width: systemInfo.windowWidth / 2,
+          height: 160
+        }
       },
       placeholderClass: ['recycle-image', 'recycle-text'],
       // itemSize: function(item) {
diff --git a/tools/demo/pages/index/index.wxml b/tools/demo/pages/index/index.wxml
@@ -1,19 +1,16 @@
 <!-- <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}}" batch="{{batchSetRecycleData}}" height="500" id="recycleId">
+<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">
   <view slot="before" style=''>
     <button bindtap="scrollTo2000">scrollTo2000</button>
     <button bindtap="scrollTo0">scrollTo0</button>
     <button bindtap="scrollToid" style="height:123.5rpx">scrollToIdx</button>
   </view>
-  <view slot="itemsize">
-    <template is="recycleItem" data="{{item: item, recycleList: recycleListItemSize}}"></template>
-  </view>
   <template is="recycleItem" data="{{item: item, recycleList: recycleList}}"></template>
   <view slot="after" style="height:200px;">after height:200px view</view>
 </recycle-view>
 <template name="recycleItem">
-  <recycle-item style="width:50%;" wx:for="{{recycleList}}" wx:key="id">
+  <recycle-item style="width:50%;height:160px;" wx:for="{{recycleList}}" wx:key="id">
     <view class="recycle-itemsize" style="width:100%;height:{{item.test.azFirst ? 160 : 160}}px;position: relative;">
         <image class='recycle-image' style='width:80px;height:80px;' src="{{item.image_url}}?imageView2/2/w/120/h/0/q/120/format/jpg"></image>
       <text class="recycle-text">{{item.idx+1}}. {{item.title}}</text>
diff --git a/tools/demo/project.config.json b/tools/demo/project.config.json
@@ -12,8 +12,8 @@
 		"nodeModules": true
 	},
 	"compileType": "miniprogram",
-	"libVersion": "2.2.3",
-	"appid": "",
+	"libVersion": "2.7.0",
+	"appid": "wxe0b5580bba739b69",
 	"projectname": "recycle-view",
 	"isGameTourist": false,
 	"condition": {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "miniprogram-recycle-view",`
`3`		`- "version": "0.0.8",`
	`3`	`+ "version": "0.1.1",`
`4`	`4`	`"description": "miniprogram custom component",`
`5`	`5`	`"main": "miniprogram_dist/index.js",`
`6`	`6`	`"scripts": {`