微信小程序轮播图功能开发实例（小程序轮播图实现）

微信小程序轮播图功能开发实例（小程序轮播图实现）

轮播图在应用中很常见，本文主要和大家分享微信小程序轮播图功能开发实例，希望能帮助到大家。

轮播图：swiper滑块视图容器。

1.编写页面结构

pages/index/index.wxml

-

注意：不要在view中加css设置:display: flex;否则效果呈现不了

2.设置数据

了解属性，方可设置

swiper-item仅可放置在组件中，宽高自动设置为100%。

在index.js中设置数据

//index.js //获取应用实例 var app = getApp() Page({ data: { imgUrls: [ { link:'/pages/index/index', url:'../uploads/a01.jpg' },{ link:'/pages/logs/logs', url:'../uploads/a02.jpg' },{ link:'/pages/user/user', url:'../uploads/a03.jpg' } ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 } })-

3.效果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。