评论

小程序瀑布流简单实现

小程序瀑布流

原理:使用小程序新增的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 })
  },

效果图

点赞 2
收藏
评论
登录 后发表内容