首页 » 工作 » 方法 » 正文

腾讯微信小程序 recycle-view 的用法示例

发布者:站点默认
2020/05/13 浏览数(471) 分类:方法 腾讯微信小程序 recycle-view 的用法示例已关闭评论

示例含下拉刷新,上拉加载

{
  "navigationBarTitleText": "列表",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "list": "miniprogram-recycle-view/recycle-view",
    "item": "miniprogram-recycle-view/recycle-item"
  }
}
<list batch="{{batchSetRecycleData}}" id="recycleId">
	<view slot="before">
        <view>这里可以放个搜索条</view>
    </view>
	<item wx:for="{{recycleList}}" wx:key="id" class="item">
        <view>{{item.title}}</view>
	</item>
  <view slot="after">
    <view>{{loadingText || '上拉加载'}}</view>
  </view>
</list>
Page({
    data: {
        loadingText: '加载中',
    },
    variables: {
        pager: {
            page: 0,
            size: 10,
            hasMore: true // 是否已全部显示完
        }
    },
    onLoad: function () {
        let self = this;
        self.ctx = createRecycleContext({
            id: 'recycleId', // 对应 Html 中 list 组件的 id
            dataKey: 'recycleList', // wx:for 绑的数据
            page: this,
            itemSize: function(item, index) {
                // 这个 itemSize 只是给 JS 计算滚动用的,CSS 那要再写一次并且保持数值一致
                // JS 不会自动从 CSS 那读也不会给 HTML 设置这里的 width 和 height
                // 每个 item 的高度可以不一样
                let rs = {
                    width: this.transformRpx(750),
                    height: 120,
                };
                return rs;
            },
            useInPage: true,
            root: getCurrentPages()[getCurrentPages().length - 1],
        });
    },
    onShow: function () {
        let self = this;
        self.refresh();
    },
    refresh: function () {
        let self = this;
        self.ctx.splice(0,  self.ctx.comp.sizeArray.length);
        self.variables.pager.page = 0; // loadData 时会 ++
        self.variables.pager.hasMore = true;
        self.loadData();
    },
    onPullDownRefresh: function () {
        let self = this;
        self.refresh();
    },
    onReachBottom: function () {
        let self = this;
        if (self.variables.pager.hasMore) {
            this.loadData();
        }
    },
    // 这个 scroll 空着就行 recycle-view 要求必须有
    onPageScroll(e) {},
    loadData(params = {}) {
        let self = this;
        self.variables.pager.page++;
        let data = {
            page: self.variables.pager.page,
            pageSize: self.variables.pager.size,
        };
        wx.showLoading();
        wx.request({
            url: 'api/articles',
            header: {
                'Content-Type': 'application/json; charset=UTF-8',
                'Authorization': 'Bearer xxxxxxxxxxxxxxxxxxxx',
            },
            data,
            success: (res) => {
                let recycleList = res && res.response && res.response.data || [];
                if (!recycleList.length) {
                    self.variables.pager.hasMore = false;
                }
                recycleList = recycleList.map(v => {
                    return {
                        id: v.ID,
                        title: v.Name,
                    };
                });
                self.ctx.append(recycleList);

                let data = {};
                let loadingText = self.data.loadingText;
                if (res && res.response && res.response.dataCount && !recycleList.length && res.response.dataCount > 0) {
                    loadingText = '没有了';
                }
                if (res && res.response && res.response.dataCount && res.response.dataCount === 0) {
                    loadingText = '暂无数据';
                }
                data.loadingText = loadingText;
                self.setData(data);
            },
            complete: function() {
                wx.hideLoading();
            }
        });
    },
});
.item {
  width: 100%;
  height: 120px;
}
点击返回顶部
  1. 留言
  2. 联系方式