微信小程序 recycle-view 使用体会

首先:上链接 微信小程序recycle-view文档

引用神马的就不写了，要注意的是下载完成之后在微信小程序-工具-npm构建一下

看了半天文档与手敲测试 发现只能支持一维数组的长列表 文档里所有数据管理的方法都是array的

使用

json：
{
    "component": true,
    "usingComponents": {
        "recycle-view": "miniprogram-recycle-view/recycle-view",
        "recycle-item": "miniprogram-recycle-view/recycle-item"
    }
}

js:
//全局
var ctx = ''
const createRecycleContext = require('miniprogram-recycle-view')
//写在页面渲染完成之后 不然会报错
ctx = createRecycleContext({
    id: 'recycleId',
        dataKey: 'recycleList',
        page: this,
        itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
            width: 162, //列表item的宽
            height: 72,//列表item的高
        },
    })
    //赋值
     let listAppend = res.data.result.list
    ctx.append(listappend)//追加数据
    //重置
    ctx.splice(0, this.data.list.length)
    

# 这里文档上有ctx.forceUpdate()这个方法 但是试了没有用

 

下面要注意的是 不能用wx:if !!! 页面里面没有这个dom 会直接报错 虽然不影响使用 但是控制台有红色的报错警告很恶心 用hidden不生效 所以 要么用display：none；要么设置hight：为0

wxml：
<recycle-view class="list_box list_box_long " scroll-top='{{scrollTop}}' batch="{{batchSetRecycleData}}" batch-key="batchSetRecycleData" height='{{bindType == 4 || bindType==1 ? list_box_height : 0}}'  scroll-y='{{isScrollY}}' lower-threshold='100' bindscrolltolower='bindscrolltolower' id="recycleId" >
    <view class="list" hover-class="none" hover-stop-propagation="false">
        <recycle-item class="list_item_box" wx:for="{{recycleList}}" wx:key="id">
        	 <image class="image" src="{{item.goodsImage}}" mode="" lazy-load="true" binderror="" bindload=""></image>
        </recycle-item>
    </view>
</recycle-view>