微信小程序 <swiper-item>標(biāo)簽傳入數(shù)據(jù)
微信小程序 <swiper-item>標(biāo)簽傳入數(shù)據(jù)
在<swiper-item>中用for循環(huán)傳入多個成對不同數(shù)據(jù)時的實現(xiàn)方法。
看下效果圖:
遍歷實現(xiàn)方法:wxss省略:
wxml中代碼:
<!--導(dǎo)航部分輪播圖--> <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}"> <swiper-item> <block wx:for="{{navs}}"> <view class="navbox"> <image class="navimg" src="{{item.navimg}}"></image> <text class="navtext">{{item.navtext}}</text> </view> </block> </swiper-item> </swiper>
相對應(yīng)js里面的代碼:
var app = getApp() Page({ data: { navs:[ { navimg:'/images/i01.png', navtext:'掌上信息'}, { navimg:'/images/i02.png', navtext:'商家'}, { navimg:'/images/i03.png', navtext:'搶購'}, { navimg:'/images/i04.png', navtext:'搶福利'}, { navimg:'/images/i05.png', navtext:'五折卡'}, { navimg:'/images/i06.png', navtext:'黑貓活動'}, { navimg:'/images/i07.png', navtext:'本地圈'}, { navimg:'/images/i08.png', navtext:'順風(fēng)車'}, ], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, } })
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JavaScript設(shè)計模式之單例模式應(yīng)用場景案例詳解
這篇文章主要為大家介紹了JavaScript中單例模式的應(yīng)用場景案例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05PHP:微信小程序 微信支付服務(wù)端集成實例詳解及源碼下載
這篇文章主要介紹了微信小程序 微信支付服務(wù)端集成實例詳解及源碼下載的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序?qū)崿F(xiàn)多個按鈕toggle功能的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多個按鈕toggle功能的實例的相關(guān)資料,需要的朋友可以參考下2017-06-06微信小程序 swiper制作tab切換實現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01fetch-event-source庫使用源碼學(xué)習(xí)
這篇文章主要為大家介紹了fetch-event-source庫源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09arrify 轉(zhuǎn)數(shù)組實現(xiàn)示例源碼解析
這篇文章主要為大家介紹了arrify 轉(zhuǎn)數(shù)組實現(xiàn)示例源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12