微信小程序瀑布流组件

实现思路

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

示例

  • backTop() 返回顶部
  • Init(arr) 接收下一个显示的数组
javascript 复制代码
<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>

源代码

微信小程序瀑布流组件

相关推荐
墨抒颖 msy.plus2 小时前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
宋辰月3 小时前
微信小程序-day4
微信小程序·小程序
^Rocky4 小时前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
微三云-轩21 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
weixin_472183541 天前
微信小程序预览和分享文件
微信小程序·小程序
墨霁青玉1 天前
微信小程序一个页面同时存在input和textarea,bindkeyboardheightchange相互影响
微信小程序·小程序
sheji34162 天前
【开题答辩全过程】以 基于微信小程序的“XIN”学生组织管理系统为例,包含答辩的问题和答案
微信小程序·小程序
达仔科技驿站2 天前
如何提取视频中的音频?音频转换工具推荐XRecode 3_1.171
音视频·软件工程·开源软件
l1t2 天前
DuckDB新版rusty_sheet 插件测试
xml·数据库·rust·插件·xlsx·duckdb
星河顾盼3 天前
【微信小程序预览文件】(PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX)
微信小程序·pdf·powerpoint