基于mpvue的小程序瀑布流

80 阅读 0 评论 53 点赞

我是靠谱客的博主疯狂小鸭子，最近开发中收集的这篇文章主要介绍基于mpvue的小程序瀑布流，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文是基于mpvue框架的小程开发，所以语法和原生的小程序语法有所区别。
思路是将数据分为左右两列，基数和偶数列。通过左右两列来进行渲染进行动态渲染的瀑布流。代码如下：

<template>
    <div class="page">
      <div style='display: none'>
        <img v-for='(item, index) in dataList' :key='item' :src='item.src' @load='loadImage' :data-index='index' alt=""/>
      </div>
<!--      @scrolltolower='loadMoreImages'-->
      <scroll-view class='main' scroll-y='true' :style="{height:windowHeight+'px'}" @scrolltolower='loadMoreImages'>
        <div class='view'>
          <div class="content" v-for='(item, index) in firstList' :key='index'
          :style="{ width: imgWidth+'px', height:(item.height + 55)+'px', marginTop: imgMargin+'px',marginLeft:imgMargin + 'px'}">
            <div class="img-content" :style="{height:item.height + 'px'}">
              <img :src='item.src'
                   class="image"
                   :data-index='index' data-type='1'
                   @click='previewImg'
                   alt=""/>
            </div>
            <div class="text">{{item.title}}</div>
            <div class="price">{{item.price}}</div>
          </div>
        </div>
        <div class='view'>
          <div class="content" v-for='(item, index) in secondList'
               :style="{marginLeft:(imgMargin/2)+'px', width: imgWidth+'px', height:(item.height + 55)+'px',marginTop: imgMargin+'px'}"
               :key='index'>
            <div class="img-content"  :style="{height:item.height+'px'}">
              <img :src='item.src'
                   class="image"
                   :data-index='index' data-type='2'
                   @click='previewImg'
                   alt=""/>
            </div>
            <div class="text">{{item.title}}</div>
            <div class="price">{{item.price}}</div>
          </div>
        </div>
      </scroll-view>
    </div>
</template>

<script>
  export default {
    name: 'flow',
    data () {
      return {
        dataList: [], // 数据源
        firstList: [], // 第一列数组
        secondList: [], // 第二列数组
        windowWidth: 0, // 页面视图宽度
        windowHeight: 0, // 视图高度
        imgMargin: 10, // 图片边距: 单位px
        imgWidth: 0,  // 图片宽度: 单位px
        topArr: [0, 0] // 存储每列的累积top
      }
    },
    methods: {
      // 加载图片
      loadImage: function (e) {
        let index = e.currentTarget.dataset.index // 图片所在索引
        let imgW = e.mp.detail.width
        let imgH = e.mp.detail.height // 图片实际宽度和高度
        let imgWidth = this.imgWidth // 图片宽度
        let imgScaleH = imgWidth / imgW * imgH // 计算图片应该显示的高度
        let dataList = this.dataList
        let margin = this.imgMargin  // 图片间距

        // 第一列的累积top，和第二列的累积top
        let firstColH = this.topArr[0]
        let secondColH = this.topArr[1]
        let firstList = this.firstList
        let secondList = this.secondList
        let obj = dataList[index]

        obj.height = imgScaleH

        if (firstColH <= secondColH) { // 表示新图片应该放到第一列
          firstColH += margin + obj.height
          firstList.push(obj)
        } else { // 放到第二列
          secondColH += margin + obj.height
          secondList.push(obj)
        }
        this.dataList = dataList
        this.firstList = firstList
        this.secondList = secondList
        this.topArr = [firstColH, secondColH]
      },
      // 加载更多图片
      loadMoreImages: function () {
        let index
        let imgs = [
          {src: 'https://yanxuan.nosdn.127.net/8ce0e3cb78fd046ec925950dacfadfc6.jpg?imageView&quality=95&thumbnail=1090x310', title: '10月促销产品'},
          {src: 'https://yanxuan-item.nosdn.127.net/9e35e1576fa25432f733ba8ff9e2e1b1.jpg?quality=95&thumbnail=245x245&imageView', title: '徐香 绿心猕猴桃 4斤装', price: '￥59'},
          {src: 'https://yanxuan-item.nosdn.127.net/b897a378999e38d063e7f83da04f03c0.jpg?quality=95&thumbnail=245x245&imageView', title: '金都一号 红心火龙果', price: '￥68'},
          {src: 'https://yanxuan-item.nosdn.127.net/86e0f7ffe73ef57284b4e37d175b904f.jpg?quality=95&thumbnail=245x245&imageView', title: '玲珑柑普茶', price: '￥85'},
          {src: 'https://yanxuan-item.nosdn.127.net/f68df756cd8e554081d84f4add5faa49.jpg?quality=95&thumbnail=245x245&imageView', title: '什锦果仁 500克', price: '￥118'},
          {src: 'https://yanxuan-item.nosdn.127.net/510c0f1b1ebe7397fc6e6fc7ffb2fa2f.jpg?quality=95&thumbnail=245x245&imageView', title: '突尼斯软籽石榴', price: '￥89'},
          {src: 'https://yanxuan-item.nosdn.127.net/93ca45751fd07c5f56ed747f0973af02.jpg?quality=95&thumbnail=245x245&imageView', title: '冻干银耳汤 15克*10袋', price: '￥49'},
          {src: 'https://yanxuan-item.nosdn.127.net/8b633812b32f9d1bf84c3d781d715d39.jpg?quality=95&thumbnail=245x245&imageView', title: '特型黄酒 500毫升', price: '￥68'},
          {src: 'https://yanxuan-item.nosdn.127.net/9ee4dbb465f59ff3ed74de767635db80.jpg?quality=95&thumbnail=245x245&imageView', title: '半甜型黄酒 720毫升', price: '￥68'},
          {src: 'https://yanxuan-item.nosdn.127.net/4801da00e3c6f21dcf28a761becfaf43.jpg?quality=95&thumbnail=245x245&imageView', title: '进口澳橙 5斤装', price: '￥75'},
          {src: 'https://yanxuan-item.nosdn.127.net/5fc3f5a6e943548f7c3fa548d0849973.jpg?quality=95&thumbnail=245x245&imageView', title: '黄金百香果 16粒装', price: '￥65'},
          {src: 'https://yanxuan-item.nosdn.127.net/ea4ee8d877a7e9d5e0394582de686883.jpg?quality=95&thumbnail=245x245&imageView', title: '996五宝茶', price: '￥109'},
          {src: 'https://yanxuan-item.nosdn.127.net/e4ec95f048a00375fc014e09bcc7b730.jpg?quality=95&thumbnail=245x245&imageView', title: '马来制造 即食燕窝 70克*6瓶 30%', price: '￥258'},
          {src: 'https://yanxuan-item.nosdn.127.net/773f5195eeaf4fdbc377a1b6add05b60.jpg?quality=95&thumbnail=245x245&imageView', title: '常温酸牛奶200克*12盒*2提', price: '￥95'},
          {src: 'https://yanxuan-item.nosdn.127.net/6444b1aeab9a254a437b6699be590e94.jpg?quality=95&thumbnail=245x245&imageView', title: '鲜萃每日坚果 25克*7袋', price: '￥39'},
          {src: 'https://yanxuan-item.nosdn.127.net/49e6999ee142aac5b14100312bfb77cc.jpg?quality=95&thumbnail=245x245&imageView', title: '黄油华夫饼 1千克', price: '￥49'},
          {src: 'https://yanxuan-item.nosdn.127.net/ba156c6607c6b72fdddb8ce5785e76f8.jpg?quality=95&thumbnail=245x245&imageView', title: '黄桃罐头 425克*6罐', price: '￥49'},
          {src: 'https://yanxuan-item.nosdn.127.net/1e249048fbbe1b8a39ee2f395795ddae.jpg?quality=95&thumbnail=245x245&imageView', title: '阿胶糕礼盒 360克', price: '￥139'},
          {src: 'https://yanxuan-item.nosdn.127.net/ed304632e64555861ed05470f5bdccb0.jpg?quality=95&thumbnail=245x245&imageView', title: '压榨一级葵花籽油 5升', price: '￥68'},
          {src: 'https://yanxuan-item.nosdn.127.net/8ab83ab6baa2ad61861ebb7d9fe27350.jpg?quality=95&thumbnail=245x245&imageView', title: '每日坚果藜麦谷物燕麦片 800克', price: '￥68'},
          {src: 'https://yanxuan-item.nosdn.127.net/855e3be6f93c1fd5bf8b8ac2791205f6.jpg?quality=95&thumbnail=245x245&imageView', title: '缤纷西点 冷冻甜品组合（3味装）', price: '￥88'},
          {src: 'https://yanxuan-item.nosdn.127.net/1f4a9294190ec16d4a55b6cae6e663bb.jpg?quality=95&thumbnail=245x245&imageView', title: '阴阳师 妙曲奇遇记曲奇礼盒 520克', price: '￥98'},
          {src: 'https://yanxuan-item.nosdn.127.net/d513a3a6b19825a4540b4916e78b8467.jpg?quality=95&thumbnail=245x245&imageView', title: '柔风黄油曲奇', price: '￥98'},
          {src: 'https://yanxuan-item.nosdn.127.net/08cb8ea2f4f302b13b741f1c53694753.jpg?quality=95&thumbnail=245x245&imageView', title: '蔬菜风味牛奶面包 胡萝卜味 360克', price: '￥24'},
          {src: 'https://yanxuan-item.nosdn.127.net/5f25e2a3f98ec3d6d0f0a72628f8163c.jpg?quality=95&thumbnail=245x245&imageView', title: '酥皮豆沙馅饼 45克*6枚', price: '￥32'},
          {src: 'https://yanxuan-item.nosdn.127.net/ad79bc3948997f7c41d61b60fee4ff33.jpg?quality=95&thumbnail=245x245&imageView', title: '四季之歌绿豆糕 240克（12枚入）', price: '￥26'},
          {src: 'https://yanxuan-item.nosdn.127.net/d64ba44b2b3275ea500e5668ea818d03.jpg?quality=95&thumbnail=245x245&imageView', title: '千层星云酥 60克*3枚', price: '￥26'},
          {src: 'https://yanxuan-item.nosdn.127.net/2ac4f976aa7311ffa4a37bdf0bfa7f4b.jpg?quality=95&thumbnail=245x245&imageView', title: '法式乳酪 50克*6枚', price: '￥38'},
          {src: 'https://yanxuan-item.nosdn.127.net/9fe97b5cfe92d26637f4614a5279282b.jpg?quality=95&thumbnail=245x245&imageView', title: '小时光 切片曲奇 17克*10袋', price: '￥19'},
          {src: 'https://yanxuan-item.nosdn.127.net/adeb97265ccace758f79da03e1f8f6db.jpg?quality=95&thumbnail=245x245&imageView', title: '咸蛋黄饼干 10克*16袋', price: '￥19'},
          {src: 'https://yanxuan-item.nosdn.127.net/fcf5e9503dd1658cf28ea46644a5a82e.jpg?quality=95&thumbnail=245x245&imageView', title: '切达奶酪曲奇 9克*20袋', price: '￥19'},
          {src: 'https://yanxuan.nosdn.127.net/621c2cbc08492b29255b3fdb5e94f19b.jpg?imageView&quality=95&thumbnail=1090x310', title: '10月新品速递', price: '每月十七号上新'}
        ]

        for (let i = 0; i < 22; i++) {
          let randomNum = Math.random() * 100
          index = parseInt(randomNum) % imgs.length
          imgs[index].height = 0
          imgs.splice(index, 1)
        }
        this.dataList = imgs
        wx.hideLoading()
      },
      /** 预览图片 */
      previewImg: function (e) {
        let index = e.currentTarget.dataset.index
        let currentSrc = ''
        switch (e.currentTarget.dataset.type) {
          case '1':
            currentSrc = this.firstList[index].src
            break
          case '2':
            currentSrc = this.secondList[index].src
        }
        wx.previewImage({
          urls: [currentSrc]
        })
      }
    },
    onLoad () {
      wx.showLoading({
        title: '加载中...'
      })
      let that = this
      // 获取页面宽高度
      wx.getSystemInfo({
        success: function (res) {
          console.log(res)
          let windowWidth = res.windowWidth
          let imgMargin = that.imgMargin
          // 两列，每列的图片宽度
          let imgWidth = (windowWidth - imgMargin * 3) / 2
          that.windowWidth = windowWidth
          that.windowHeight = res.windowHeight
          that.imgWidth = imgWidth
          that.loadMoreImages() // 初始化数据
        }
      })
    }
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100%;
  }
  .main{
    width: 100%;
    height: 100%;
    .view {
      display: inline-block !important;
      position: relative;
      vertical-align: top;
      width: 50%;
      .content {
        box-shadow: 0 0 5px silver;
        border-radius: 4px;
        .img-content {
          .image {
            width: 100%;
            height: 100%;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
          }
        }
        .text {
          padding: 5px 8px 0 8px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break:break-all;
        }
        .price {
          font-size: 14px;
          color: #df4416;
          padding: 5px 8px 5px 8px;
        }
      }
    }
  }
</style>