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;
}
}
})
}
})
[代码]
全部代码 -------> 代码片段 <---------
我想把此列表改成瀑布流展示，求路过的大神指点下！！！！！！
