网络知识 娱乐 微信小程序--瀑布流

微信小程序--瀑布流

发布: 2023年2月14日 10:17:50

本文使用了微信小程序第三方组件库 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 完成 瀑布流，当然是可以的。

一、 修改wx的方法为组件内的方法

修改后需要 npm run build 重新生成 dist包，并替换微信小程序中的dist包
在这里插入图片描述

二、 在onload里获取自定义组件的实例，并通过组件调用方法

在这里插入图片描述

相关文章