微信小程序瀑布流方法

 时间:2024-09-22 01:09:18

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

微信小程序瀑布流方法

工具/原料

微信小程序

微信小程序开发工具

截图工具

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、保存代码并进行编译,查看左侧模拟器显示的效果

微信小程序瀑布流方法

采购管理的重要性 制作标书需要掌握什么技能 中小企业如何合理避税?12种方法不得不知! Mac版Knotes如何授权微信读书? 一个中怎么查看人工智能
热门搜索
粤语动漫 水景图片 威震天图片 天使动漫论坛 菜图片大全