原理:使用小程序新增的grid-view组件,支持双列,多列配置,间距设置
grid-view组件文档:https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html
示例代码
wxml
<scroll-view type="custom" scroll-y style="box-sizing:border-box;">
<grid-view type="masonry" main-axis-gap="{{10}}" cross-axis-gap="{{10}}">
<view wx:for="{{arr}}" style="height:{{item*100}}rpx;border:1rpx solid red;">
{{index}}
</view>
</grid-view>
</scroll-view>
js
/**
* 页面的初始数据
*/
data: {
arr: [3, 2, 5, 7, 3, 7, 5, 4, 5, 7]
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
let newArr = [5, 3, 4, 7, 8, 2, 1, 5, 7, 6]
this.setData({ arr: [...this.data.arr, ...newArr] })
this.setData({ arr: this.data.arr })
},
效果图
这一段是什么意思?
style="height:{{item*100}}rpx;