更新记录

3.2（2020-06-11）

1. 更新加载更多示例，添加锁的应用，避免在加载更多过程中用户频繁下拉导致的重复触发而渲染异常

3.1（2020-05-20）

1. 修复首个元素在右边先出现的问题

3.0（2020-04-29）

1. 优化组件初始化方式，修复APP和小程序上分页请求场景示例的加载异常
2. 新增模拟首次加载使用场景示例

平台兼容性

瀑布流示例（根据图片高度动态分布）

简述说明

• 瀑布流示例适用于H5、小程序和APP，可以先运行示例项目查看效果，示例包含mock数据，核心代码不到10行。适合应用于图片高度自适应，追求两列高度差小，自上而下流式加载效果的页面上。
• 示例附带模拟了分页请求（加载更多）和更新数据使用场景
• 组件是通过判断列的高度进行每个item的处放，所以图片上下文字高度也不影响瀑布流，也能最大化的减少两列高度差

提示

• 组件的开发用到stylus，提前安装好stylus编译插件
• 组件模板可根据原型或业务需求进行字段和部分样式的修改
• 关键逻辑部分进行了注释
• 组件在APP平台上nextTick会存在触发失败的情况所以用setTimeout代替了$nextTick，有疑虑的同学可以进行条件编译

组件属性

使用示例

<template>
    <view>
        <wfalls-flow :list="list" ref="wfalls" @finishLoad="getLoadNum"></wfalls-flow>
    </view>
</template>

<script>
    import wfallsFlow from '@/components/wfalls-flow/wfalls-flow'
    const list = require('@/static/wfalls-flow/data.json').list
    export default {
        components:{ wfallsFlow },
        data() {
            return {
                list:[],
                isNewRenderDone:false //锁的作用
            }
        },
        methods:{
            getLoadNum(num){
                console.log('共加载了:'+num);
                !this.isNewRenderDone&&uni.hideLoading()
                this.isNewRenderDone = true
            }
        },
        onLoad() {
            // 模拟首次加载列表数据
            setTimeout(()=>{
                this.list = list;
                this.$refs.wfalls.init();
            },1000)
        },
        onReachBottom() {
            console.log('onReachBottom');
            // 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
            if(!this.isNewRenderDone) return;   
            this.isNewRenderDone = false
            uni.showLoading({title:'正在加载更多'})
            // 模拟分页请求 (加载更多)
            setTimeout(()=>{
                const nextData = JSON.parse(JSON.stringify(this.list.slice(0,10)))
                this.list.push(...nextData);
                // this.$nextTick(()=>{
                //     this.$refs.wfalls.handleViewRender();
                // })
                // APP上触发不了还是setTimeout万能
                setTimeout(()=>{
                    this.$refs.wfalls.handleViewRender();
                },0)
            },800)
        },
        onPullDownRefresh() {
            // 模拟更新新数据
            const newData = JSON.parse(JSON.stringify(this.list.slice(0,10)))
            setTimeout(()=>{
                this.list = newData;
                this.$refs.wfalls.init()
                uni.stopPullDownRefresh()
                uni.showToast({title:'刷新成功',icon:'none'})
            },800)
        }
    }
</script>

示例预览

https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/wfalls-flow/wfalls-flow