南順網絡
微信小程序實現圖片滾動效果示例
本文實例講述了微信小程序實現圖片滾動效果。分享給大家供大家參考，具體如(rú)下：
效果：左右滑動可(kě)以切換展示圖片
代碼：
1 2 3 4 5 6 7 | <!--pages/test/test.wxml--><!-- 組件 --><swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='widthFix' class='img' /> </swiper-item></swiper> |
pages/test/test.js：
1 2 3 4 5 6 7 8 9 10 11 12 13 | Page({ data: { imgUrls:[ ] }, //事件處理(lǐ)函數 toupper:function(){ console.log("觸發了toupper"); }}) |
pages/test/test.wxss：
1 2 3 | .img{ width: 100%;} |
心得：
swiper組件：滑塊視(shì)圖容器。
可(kě)以為(wèi)swiper添加autoplay屬性，是之自(zì)動播放，例如(rú)：
autoplay=”true”swiper組件中使用的(de)是image單标簽，而不是雙标簽（否則報錯）。
希望本文所述對大家微信小程序開發有所幫助。
編輯:--ns868
