更新记录

1.0.2（2024-11-20） 下载此版本

1. 优化dom问题判断

1.0.1（2024-11-18） 下载此版本

1. 优化

1.0.0（2024-11-13） 下载此版本

瀑布流

平台兼容性

实现思路

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

示例

<template>
    <view style="width: 100vw;height: 100vh;background-color: #ccc;">
        <newCompentVue :isnextpage="true" imgSrc="productDisplayImg" @scrolltolower="scrolltolower" ref="leftright">
            <template v-slot:left="{item,index}">
                <view style="margin: 0 12rpx 24rpx 24rpx;background-color: white;">
                    <image style="width: 100%;display: block;" :src="item.productDisplayImg" mode="widthFix"></image>
                    <view>{{item.productName}}</view>
                </view>
            </template>
            <template v-slot:right="{item,index}">
                <view style="margin: 0 24rpx 24rpx 12rpx;background-color: white;">
                    <image style="width: 100%;display: block;" :src="item.productDisplayImg" mode="widthFix"></image>
                    <view>{{item.productName}}</view>
                </view>
            </template>
            <template v-slot:top>
                top
            </template>
            <template v-slot:bottom>
                bottom
            </template>
        </newCompentVue>
    </view>
</template>

<script>
    import newCompentVue from '../Component/newCompent.vue'
    export default {
        components: {
            newCompentVue
        },
        data() {
            return {
                arrList: [{
                        productDisplayImg: "../../static/1.jpg",
                        productName: '啊实打实大苏打实打实的'
                    },
                    {
                        productDisplayImg: "../../static/2.jpg",
                        productName: '123'
                    },
                    {
                        productDisplayImg: "../../static/logo.png",
                        productName: 'vvvvv'
                    }
                ],
                tempList: []
            }
        },
        async onLoad() {
            var d = [...this.arrList];
            for (let i = 0; i < 3; i++) {
                this.arrList = [...this.arrList, ...d]
            }
            this.arrList = [...this.arrList, {
                productDisplayImg: "../../static/1.jpg",
                productName: 'kasdkas'
            }]
            this.arrList = [...this.arrList, {
                productDisplayImg: "../../static/1.jpg",
                productName: '阿三大苏打啥话都说'
            }]

            this.tempList = [...this.arrList]

            this.$nextTick(() => {
                this.$refs.leftright.Init(this.arrList)
            })

        },
        methods: {
            // isnextpage true   不触发
            scrolltolower() {
                this.$nextTick(() => {
                    // this.$refs.leftright.Init(this.tempList)
                })
            }
        }
    }
</script>

<style>

</style>

源代码

微信小程序瀑布流组件