养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

微信小程序瀑布流方法

时间:2024-09-21 22:52:36

在进行微信小程序开发时,可能会用到图片,而且将图片布局成瀑布流的形式。那么,具体是怎么实现的呢?

微信小程序瀑布流方法

工具/原料

微信小程序

微信小程序开发工具

截图工具

PPT2019

台式机

方法/步骤

1、打开微信小程序开发工具,用户扫码登录;创建一个微信小程序项目

微信小程序瀑布流方法

2、创建好的项目有index文件夹以及文件,如果要新建模块,可以创建一个user

微信小程序瀑布流方法

3、打开app.json文件,添加一个tabBar,并添加list(首页和用户)

微信小程序瀑布流方法

4、在小程序项目中新建一个目录image,将两张图片拷贝进去

微信小程序瀑布流方法

5、打开index.wxml文件,添加for循环和if判断语句,根据不同条件展示图片

微信小程序瀑布流方法

6、接着打开index.js文件,在data对象中初始化对象list并赋初值

微信小程序瀑布流方法

7、在index.wxss文件中,定义图片的宽度和高度,并控制奇偶显示图片的样式

微信小程序瀑布流方法

8、保存代码并进行编译,查看左侧模拟器显示的效果

微信小程序瀑布流方法

© 一点知识