更新记录

1.1(2020-10-19)

修复图片加载失败后不显示布局的bug

1.0(2020-10-17)

瀑布流布局

查看更多

用法说明


    <view class="content">
        <lyp-waterfall :column="3" :loadDataCount="loadDataCount" :dataList="list" ></lyp-waterfall>
    </view>

    import lypWaterfall from '@/components/lyp-waterfall/index.vue';

    export default {
        components:{
            lypWaterfall
        },
        data() {
            return {
                loading: 0,
                loadDataCount: 10,
                list: []
            }
        },
        onReady() {
            this.ajax()
        },
        // 加载更多数据
        onReachBottom() {
            setTimeout(() => {
                let list = randomData();
                this.loadDataCount = list.length;
                this.list = this.list.concat(list);
            },500)
        },
        methods: {
            ajax(){
                // 这里是请求获取到的数据
                let list = randomData();
                // 这里是请求获取到的数据的长度,注意不是全部数据的长度,而是当前获取的长度
                this.loadDataCount = list.length;

                this.list = list;
            }
        }
    }

组件 : @/components/lyp-waterfall/index.vue 这个组件是瀑布流布局的计算页面,在这个页面里计算了每个view的定位left 和 top值。 组件 : @/components/lyp-waterfall/item.vue 这个组件是你需要的列表布局,你可以在这里修改,把他布局成你所期望的布局,当然需要注意的是里面有获取节点信息的函数,如果类名改变,需要在函数里把类名修改成对应类名

    createSelectorQuery.select('.l-module') // .l-module是本组件的根节点类名,把他修改成你所使用的根节点类名

属性说明

属性 类型 默认值 必填 说明
dataList Array [] true 用户请求到的需要渲染页面的数据
loadDataCount Number 10 true 请求后添加的数据数量,例如:分页1请求的数据是10条数据,那么loadDataCount=10,分页2请求的数据只有7条,那么loadDataCount=7
column Number 2 false 瀑布流的列数
padding Array [12, 12] false 左右两边的间距 0下标左1下标右 单位px
spaceX Number 9 false 每一列之间的间距 单位px
spaceY Number 9 false 每一行之间的间距 单位px

测试说明

h5/app暂时没有发现问题,小程序暂未测试,不够依我的经验来看需要把lyp-waterfall/index.vue当成主页使用,而不是已组件的形式, 如果有问题或者建议加QQ 624428121。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问