微信小程序--瀑布流-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序--瀑布流。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文使用了微信小程序第三方组件库 Lin UI 。
Lin UI 是基于微信小程序原生语法实现的组件库。遵循简洁，易用的设计规范。

前言

Lin UI 中封装了瀑布流的组件，使用方法也比较简单，但是写法让我不是很理解，因此决定下载源码研究。
以下将从 如何使用，源码研究，源码改造 三个方面讲述。

使用

一、效果

微信小程序--瀑布流

二、步骤

1、引入组件库

在开始之前需要在微信小程序中先引入Lin-UI 组件，不知道如何引入的话可以查看我的上一篇文章。
微信小程序引入第三方组件

2、完成部分代码

通过 Lin-UI 的文档 Lin-ui 瀑布流使用文档，我们可以先完成以下文件，直接复制文档里的代码到小程序即可：

l-demo 自定义组件（是瀑布流中抽象节点的内容）

demo.js 、demo.wxml、demo.wxss
使用自定义组件的 Page 页面
.wxml 、.js

完成后的目录结构如下：
微信小程序--瀑布流

3、完成最后部分

除此之外我们还需要额外修改以下内容，直接复制本文中的代码到小程序即可：

l-demo.json （引入依赖的组件）
Page页面 .js 中的data数据、.json文件
下载瀑布流中需要展示的图片，并放入到小程序项目文件夹中。

3.1 自定义组件添加依赖

自定义组件 l-demo .json文件中需要添加引用，引用的路径根据自己的小程序修改

{
    "component": true,
    "usingComponents": {
        "l-card":"/dist/card/index",
        "l-price":"/dist/price/index"
    }
}

3.2 Page页面修改data

使用瀑布流组件的页面 .js 文件中 data 修改为以下

demo:[{
        image: '/imgsource/1.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/2.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/3.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{ 
        image: '/imgsource/4.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/5.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/6.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/7.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/8.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/9.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/10.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/11.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/12.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
        count: '888',
        delCount: '666'
      },{
        image: '/imgsource/13.jpeg',
        title: '显瘦中长款系带风衣',
        describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。不易皱好打理。',
        count: '888',
        delCount: '666'
      }]

3.3 下载图片

image的图片可以百度直接搜索
微信小程序--瀑布流

3.4 Page页面增加依赖

引入瀑布流的页面 .json 文件添加依赖

{
    "usingComponents": {
        "l-demo":"/component/demo",
        "l-water-flow":"/dist/water-flow/index"
       }
}

通过Lin-ui 文档加补充说明即可完成效果图。

研究

查看源码：https://github.com/TaleLin/lin-ui/tree/master/src

微信小程序--瀑布流

一、为什么页面js文件 onLoad 方法里可以调用 wx.lin.renderWaterFlow

|| 是什么意思
||的介绍

wx 是什么意思
wx对象在小程序相当于浏览器的window，属于微信小程序的顶级对象，可以全局调用

_init 什么时候调用
attached 的时候调用在onload之前

wx.lin.renderWaterFlow是什么意思
给lin 这个对象加一个方法。

lin 是什么意思
lin是一个对象，可以替换成别的值也是可以的。比如 zzz
替换的话需要做以下操作：
1、修改源码里瀑布流组件的 lin 为 zzz
2、命令行中打开源码所在的文件夹，重新编译 npm run build
3、把生成的dist文件拷贝到微信小程序中

二、为什么调用 wx.lin.renderWaterFlow 方法后自定义组件里就有了数据

onload之前会创建组件实例；在onload 方法里通过调用 renderWaterFlow 方法给实例 data 赋值。

改造

查看文档中的wx.lin 方法，文档中提示建议使用开放函数，wx.lin 将在未来的某个版本废弃，那么如果废弃后该怎么使用瀑布流呢。
看到文档中提到了 selectComponent ，查看小程序文档，微信小程序中提供了获取组件示例的方法 this.selectComponent(‘#the-id’)，那么是否可以使用 this.selectComponent(‘#the-id’) 替换 wx.lin 完成瀑布流，当然是可以的。