评论

recycle-view 商品长列表应用

列表优化之----recycle-view 在商品长列表中的应用

recycle-view 在商品长列表中的应用

参考官方文档

WXML:

<recycle-view class="list" batch="{{batchSetRecycleData}}" id="recycleId" bindscrolltolower="bindscrolltolower" scroll-y="true">
  <recycle-item class="record" wx:for="{{recycleList}}" wx:key="id">
    <view class="record_image" style="background:url( {{item.images[0] }}&x-oss-process=image/resize,s_320 )"></view>
    <view class="record_view">{{index}} . {{item.title}}</view>
  </recycle-item>
  <view slot="after">加载中...</view>
</recycle-view>

JS:

const app = getApp()
const createRecycleContext = require('miniprogram-recycle-view');
Page({
  pageNum:1,//页码
  listobj: Object,//RecycleContext对象
  postflg:true,//是否可以加载列表,用户误触控制
  windowWidth:0,//系统页面可视宽度
  data: {},

  onReady: function () {
    var than = this;
    //获取系统参数
    wx.getSystemInfo({
      success: function(res) {
        than.windowWidth = res.windowWidth;
        //创建RecycleContext对象来管理 recycle-view 定义的的数据
        than.listobj = createRecycleContext({
          id: 'recycleId',
          dataKey: 'recycleList',
          page: than,
          itemSize: than.itemSizeFunc,
        })
        
        than.getlist();//请求接口
      },
    })
  },

  //设置item宽高信息,样式所设必须与之相同
  itemSizeFunc: function (item, idx) {
    var than = this;
    return {
      width: than.windowWidth * 0.47,
      height: than.windowWidth * 0.61
    }
  },
  
  //滚动到底部监听,分页加载
  bindscrolltolower(e) {
    console.log('滚动到底部----');
    if(this.postflg){
      this.postflg = false;//请求完成前不再更改页码请求接口
      this.pageNum++;
      this.getlist();
    }
  },

  //数据请求
  getlist(){
    var than = this;
    wx.request({
      url: 'https://w.taopaitang.com/api/discover?page=1&pagenum=10',
      data:{
        page: than.pageNum,
        pagenum:10,
      },
      method: 'get',
      success(res){
        console.log('数据请求成功----' + than.pageNum +'---',res);
        if(res.data.message){
          //append  RecycleContext 对象提供的方法:在当前的长列表数据上追加list数据
          than.listobj.append(res.data.data.items);
          than.postflg = true;
        }
      }
    })
  }
})

全部代码 -------> 代码片段 <---------

我想把此列表改成瀑布流展示,求路过的大神指点下!!!!!!

最后一次编辑于  2019-10-07  
点赞 3
收藏
评论

3 个评论

登录 后发表内容