关于uni-app:uniapp项目瀑布流布局完美解决方案

预览图

应用教程

间接复制代码 <hd-list/> 列表布局数据本人写

<template>  <view class="waterfall-wrap">    <view class="waterfall-list">      <view class="left">        <hd-list          :listData="item"          v-for="(item,index) in goodsLeftList"          :key="index"          @onImageLoad="onImageLoad"        ></hd-list>      </view>      <view class="right">        <hd-list          :listData="item"          v-for="(item,index) in goodsRightList"          :key="index"          @onImageLoad="onImageLoad"        ></hd-list>      </view>    </view>  </view></template>

<script>import hdList from "../component/hd-list.vue";export default {  name: "waterfall",  props: {    listData: {      type: Array,      default: []    }  },  components: {    hdList  },  watch: {    /**     * 监听listData数据     */    listData: {      handler: function(data) {        data.length > 0 && this.waterfallImage();      },      immediate: true    }  },  data() {    return {      goodsListCount: 0, //加载第i张图片      // 左侧商品列表      goodsLeftList: [],      goodsLeftListHeight: 0,      // 右侧商品列表      goodsRightList: [],      goodsRightListHeight: 0    };  },  methods: {    // 图片绑定事件，通过比拟左右列表高度，实现瀑布流展现    onImageLoad: function(e) {      let divWidth = 342; //显示的单栏宽度，我设为342rpx      let oImgW = e.detail.width; //图片原始宽度      let oImgH = e.detail.height; //图片原始高度      let rImgH = (divWidth * oImgH) / oImgW + 32; //依据宽高比计算以后载入的图片的高度      if (this.goodsListCount == 0) {        this.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight        this.goodsListCount++; //图片索引加1        this.goodsRightList.push(this.listData[this.goodsListCount]); //增加第二张图片到goodsRightList数组，因为第一张曾经初始化到左侧列表中      } else {        this.goodsListCount++; //图片索引加1        if (this.goodsLeftListHeight > this.goodsRightListHeight) {          //把图片的高度加到目前高度更低的栏中          this.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight        } else {          this.goodsLeftListHeight += rImgH;        }        if (this.goodsListCount < this.listData.length) {          //依据目前的栏高，把下一张图片，push到低的那栏          if (this.goodsLeftListHeight > this.goodsRightListHeight) {            this.goodsRightList.push(this.listData[this.goodsListCount]);          } else {            this.goodsLeftList.push(this.listData[this.goodsListCount]);          }        }      }    },    // 向商品列表增加第一张图片    async waterfallImage() {      this.goodsListCount = 0;      this.goodsLeftList.push(this.listData[0]);    }  }};</script>

兼容性

uni-app我的项目中应用都兼容

欢送关注
欢送关注小程序“进阶的大前端”，800多道前端面试题在线查看