微信小程序 - - - - - 瀑布流效果实现

瀑布流效果

  • 1. 瀑布流
    • 1.1 什么叫瀑布流?
    • 1.2 瀑布流有什么优点?
    • 1.3 如何实现瀑布流的关键是什么?
  • 2. 实现思路
    • 2.1 思路梳理
    • 2.2 实现瀑布流

对于一些小程序,关于瀑布流的需求是很正常的,瀑布流看起来确实很舒服,但是具体该如何实现呢?

下文给出的方式是: js + css

1. 瀑布流

1.1 什么叫瀑布流?

瀑布流,又称瀑布流式布局
是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部

1.2 瀑布流有什么优点?

  • 以图片为主的展示页面
  • 图片尺寸不一交错排布
  • 空间使用更加充分,节省了空间

1.3 如何实现瀑布流的关键是什么?

根据1.1的解释,可以解析出如下两点:

  • 参差不齐: 就是说瀑布流card的高度是不一致
  • 不断加载数据块并附加至当前尾部: 就是说新加载的数据,一直追加到现有数据列表的底部

2. 实现思路

2.1 思路梳理

由1.1、1.2、1.3,相信对于瀑布流已经有了一定的概念,接下来就是如何实现瀑布流。

实现瀑布流的关键点在于:

  • 分别存储当前列的渲染数据、高度数据
  • 新数据应该往哪一列进行追加

2.2 实现瀑布流

假设场景如下:
这是一个商城类的小程序,只需要两列数据即可。上拉加载数据后,自动排列到两侧对应的列表里。

代码如下:

const app = getApp()
var leftHeight = 0, // 左侧列表累计高度
  rightHeight = 0; // 右侧列表累计高度

var commonHeight = 210; // 瀑布流卡片 除图片外的固有高度
Page({
  data: {
    page: 1,
    leftGoods: [], // 左侧列表渲染数据
    rightGoods: [] // 右侧列表渲染数据
  },
  onLoad() {
    // 初始化
    this.init()
  },

  init() {
    // 初始化两侧累计高度、两侧列表数据
    // 重新通过接口获取数据
    leftHeight = 0
    rightHeight = 0
    this.setData({
      leftGoods: [],
      rightGoods: []
    }, () => {
      this.getGoodsList();
    })
  },


  // 获取商品数据
  getGoodsList() {
    const _this = this;
    const {
      page
    } = this.data
    app.http.request('/goods-list', {
      page
    }).then(res => {
      const {
        ec,
        data
      } = res
      if (ec == 200) {
        // 解构出当前存储的数据
        const {
          leftGoods,
          rightGoods
        } = this.data

        // 对返回值里的数据进行处理
        data.list.map(item => {
          // 解构出每张图片的宽高值
          const {
            height,
            width
          } = item.img

          // 计算图片宽高比
          const aspectRatio = width / height

          // 计算图片真实渲染的高度
          let realHeight = 340 / aspectRatio

          // 优先给左侧列表添加数据
          // 只要左侧累计高度不大于右侧累计高度,就给左侧添加;否则就给右侧添加
          // 列表添加数据,对应累计高度也应调整
          if (leftHeight <= rightHeight) {
            leftGoods.push(item)
            leftHeight = leftHeight + realHeight + commonHeight
          } else {
            rightGoods.push(item)
            rightHeight = rightHeight + realHeight + commonHeight
          }

          // 数据处理完成,进行存储
          _this.setData({
            leftGoods,
            rightGoods,
          })
        })
      } else {
        wx.showToast({
          icon: 'error',
          title: '加载数据失败',
        })
      }
    })
  },

  // 划到底部 加载更多
  lower: app.throttle(function () {
    const {
      page
    } = this.data
    this.setData({
      page: page + 1
    }, () => {
      this.getGoodsList()
    })
  }, 500),

})

现在处理好了要渲染的数据,接下来只需要在页面进行布局渲染即可!

你可能感兴趣的:(微信小程序,微信小程序)