微信小程序——学习心得三

最新推荐文章于 2022-05-16 01:04:04 发布

ZhouDong0110

最新推荐文章于 2022-05-16 01:04:04 发布

阅读量931

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/ZhouDong0110/article/details/104563393

版权

本文详细介绍了微信小程序中实现首页轮播图、页面布局和内容填充的步骤。通过学习swiper标签、页面布局、图片及文字渲染，加深了对小程序操作和代码的理解。案例包括头部轮播图的实现，中部四个图像加小标题的设计，以及底部多个图片加文字内容的展示。通过实践，提升了对小程序组件和数据绑定的掌握。

摘要由CSDN通过智能技术生成

综合实例：评测小程序首页的实现
案例分析：
在这里插入图片描述
1.头部是由一个轮播图构成
2.中部由四个图像加小标题构成
3.底部是多个相同的图片加文字内容修饰
学习目标：
1.学习swiper标签实现轮播图的效果
2.学习页面布局和图片及文字的渲染
3.在实践过程中发现自己的问题，加强对操作的熟练性，和对代码的熟悉
案例实现步骤：
1.首先创建新的小程序项目，将原来的样式文件中的代码删除，基本文件全部初始化；
2.在微信公众平台下的微信开发文档的组件里找视图容器中的swiper标签，复制示例代码到index.wxml文件中，改变属性值如图所示，使轮播图可以自动播放；
在这里插入图片描述
然后设置swiper的属性，主要有autoplay，interval等属性，其中autoplay设置是否自动轮播；
接着使用block标签，放置要轮播的图片，图片的来源等一下从js文件中获取；
接着打开js文件，在js文件中的data函数里面定义图片的路径，这里放置了三张图片的路径；