day05

最新推荐文章于 2024-05-10 17:05:24 发布

做个好梦1997

最新推荐文章于 2024-05-10 17:05:24 发布

阅读量49

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sadouxinever/article/details/128960918

版权

瀑布流

在这里插入图片描述
实现的步骤：
加载到后端的数据
设置我们需要的属性，这里我们需要leftList、rightList、leftHeight、rightHeight
遍历数组，通过wx.getImageInfo获取到每个元素图片的宽度高度（需要配置download的域名）
判断这个元素应该被放在左边还是右边（放在数组高度低的一边）
处理完数据之后，把数据设置到data上
在前端展示这些数据
（图片需要加上mode=“widthFix”,宽度固定，高度自适应，保持宽高比）
wxml


<view class="box" bindtap="toTalk">
  <view class="left">
    <image wx:for="{{leftList}}" 
    src="{{item.coverImgUrl}}" mode="widthFix"/>
  </view>
  <view class="right">
    <image wx:for="{{rightList}}" 
    src="{{item.coverImgUrl}}" mode="widthFix"/>
  </view>
</view>
<view wx:if="{{isEnd}}">
  没有更多了
</view>

wx.js

 toTalk(e) {
    app.globalData.loginPromise.then(() => {
      if (app.globalData.isLogin) {
        console.log('登陆了');
        console.log(e);
        let id = e.currentTarget.dataset.id
        console.log(id);
        wx.navigateTo({
          url: '../../talk/talk',
        })
      } else {
        console.log('未登录');
        wx.showModal({
          title: '',
          content: '是否去登录页面',
          success: (res) => {
            if (res.cancel) {
              console.log('用户点击取消');
              wx.showModal({
                icon: 'error',
                title: '点击了取消'
              })
            }
            if (res.confirm) {
              wx.switchTab({
                url: '../mine/mine',
              })
            }
          }
        })
      }
    })
  },
  // 遍历图片数组
  Ergodic(list) {
    this.data.isEnd = false
    this.data.flag = false
    // shift只是删除元素
    let item = list.shift()
    //  console.log(item);
    if (list.length <= 0) {
      this.data.flag = true
      return
    }
    // 获取图片信息
    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.Ergodic(list)
      }
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    leftList: [],
    rightList: [],
    leftHeight: 0,
    rightHeight: 0,
    //防止过分渲染
    flag: false,
    // 判断是否加载完成到底
    isEnd: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    waterfallList(1, 10).then(res => {
      console.log(res);
      this.Ergodic(res.data.rows)
    })
  },

下拉刷新

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('onPullDownRefresh');

    if (this.data.flag) {
      // 清空老数组
      this.setData({
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0,
      })
      waterfallList(1, 10).then(res => {
        console.log(res);
        this.Ergodic(res.data.rows)
      })
    }

  },

上拉触底

pageSize: 10,
  onReachBottom() {
    console.log('onReachBottom');
    // 加薪的
    waterfallList(1, this.pageSize += 10).then(res => {
      console.log(res);
      // 除去旧的
      this.Ergodic(res.data.rows.slice(this.pageSize - 10))
      if (this.pageSize >= total) {
        this.data.isEnd = true
      } else {
        this.Ergodic(res.data.rows.slice(this.pageSize - 10))
      }
    })
  },