这篇文章主要为大家详细介绍了微信小程序实现轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。
先来看看效果图:

主要用swiper + swiper-item来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <view class=& #39;swiper'>滑块视图容器</view>
<!--
indicator-dots=& #39;true' 是否显示指示点 默认 false
indicator-color:指示点颜色
indicator-active-color:选中的指示点颜色
autoplay:是否自动切换 默认: false
interval:自动切换时间间隔
duration:滑动动画时长
vertical 是否改成纵向, 默认 false
-->
<swiper indicator-dots=& #39;true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
<block wx: for = "{{imgUrl}}" >
<swiper-item class= "item_image" >
<image src=& #39;{{item}}' class='swiper_image' mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
|
一个简单的小案例,轮播图,代码简洁,功能强大。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。