微信小程序瀑布流组件

devtools/2024/11/17 21:03:45/

实现思路

布局采用左右风格的方式,图片采用宽度固定自适应高度
接收到显示的数组循环获取左右的高度对比下一个插入左或右
提供左右插槽可自定义布局,传出当前循环的值与下标
提供触底事件与返回顶部事件
在滚动过程中隐藏不需要显示的数据以减少微信小程序dom的消耗

示例

backTop() 返回顶部
Init(arr) 接收下一个显示的数组

<template><view style="display: flex;flex-direction: column;width: 100%;height: 100wh;"><view class="ddddd"><ZzzVue @scrolltolower="jhjj2" ref="leftright"><template v-slot:left="{data,dataIndex}"><image :src="data"style="width: 100%;display: block;margin: 0;padding: 10rpx;box-sizing: border-box;"mode="widthFix"></image></template><template v-slot:right="{data,dataIndex}"><image :src="data"style="width: 100%;display: block;margin: 0;padding: 10rpx;box-sizing: border-box;"mode="widthFix"></image></template></ZzzVue></view><view @click="jhjj2()" style=" line-height: 90rpx;background: #ccc;">下一页</view><view @click="jhjj333()" style=" line-height: 90rpx;background: #ccc;">返回顶部</view></view>
</template><script>import a1 from '../../static/1.jpg'import a2 from '../../static/2.jpg'import ZzzVue from '../Component/Compent.vue'export default {components: {ZzzVue},data() {return {arrList: [a1,a2],tempList: []}},onLoad() {var d = [...this.arrList];for (let i = 0; i < 5; i++) {this.arrList = [...this.arrList, ...d]}this.tempList = [...this.arrList]this.$nextTick(() => {this.$refs.leftright.Init(this.arrList)})},methods: {jhjj333() {this.$nextTick(() => {this.$refs.leftright.backTop()})},jhjj2() {this.$nextTick(() => {this.$refs.leftright.Init(this.tempList)})},}}
</script><style>.ddddd {width: 100%;height: 80vh;}
</style>