微信小程序-第四天

最新推荐文章于 2023-06-14 10:27:08 发布

快提醒我去学习

最新推荐文章于 2023-06-14 10:27:08 发布

阅读量153

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_49021391/article/details/127476250

版权

如何实现瀑布流？

wxml代码：分成左右两个盒子

<view class="box">
  <view class="left" >
    <image wx:for="{{leftList}}" bindtap="toChatDetail" data-id="{{item.postsId}}"  mode="widthFix" src="{{item.coverImgUrl}}"></image>
  </view>
  <view class="right" >
    <image wx:for="{{rightList}}" bindtap="toChatDetail" data-id="{{item.postsId}}" mode="widthFix" src="{{item.coverImgUrl}}"></image>
  </view>
</view>

wxss代码：样式

.van-button--normal{
  width: 100%;
  padding: 0!important;
}
.myImg{
  margin:10px 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.txtBox{
  display: flex;
  padding: 5px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.myInfoIitle{
  width: 20%;
}
.txt{
  margin-left: 40px;
  font-size: 14px;
  color: gray;
}

js代码：切割数组，使用递归方法拼接

 data: {
    leftList:[],
    rightList:[],
    leftHeight:0,
    rightHeight:0,
    // 整体数据是否完成
    finish:false,
    isEnd:false,
    flag:true
  },
  pageNum:1,
  pageSize:10,
  initList(list){
    this.data.finish=false
    if(list.length==0){
      this.data.finish=true
      return
    }
    let item = list.shift()
    wx.getImageInfo({
      src: item.coverImgUrl,
      success:(res)=>{
        if(this.data.leftHeight<=this.data.rightHeight){
          // 放到左边列表
          this.data.leftList.push(item)
          // 记录高度变化
          this.data.leftHeight += res.height/res.width 
        }else{
          // 放到右边列表
          this.data.rightList.push(item)
          // 记录高度变化
          this.data.rightHeight += res.height/res.width 
        }
        // 更改视图
        this.setData({
          leftList:this.data.leftList,
          rightList:this.data.rightList,
        })
      },
      complete:()=>{
        this.initList(list)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 请求论坛列表接口
    getPostsList(this.pageNum,this.pageSize).then(res=>{
      console.log(res.data.rows);
      // 处理数据
      this.initList(res.data.rows)
    })
  },

用户上拉刷新和触底刷新

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.data.isEnd = false
    if(this.data.finish){
      this.setData({
        leftList:[],
        rightList:[],
        leftHeight:0,
        rightHeight:0
      })
      getPostsList().then(res=>{
        // 处理数据
        this.initList(res.data.rows)
     })
    }else{
      return
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log("触底了");
    this.data.flag=true
    if(this.data.finish){
      if(!this.data.isEnd){
        this.pageNum++
        getPostsList(this.pageNum, this.pageSize).then(res => {
          // 如果加载到最后一页
          if (this.pageNum*this.pageSize >= res.data.total) {
            console.log("最后一页");
            // 处理数据
            this.initList(res.data.rows)
            this.setData({
              isEnd: true,
              flag:false
            })
          } else {
            // 处理数据
            this.initList(res.data.rows)
          }
        })
      }

    }
  },