微信小程序 <swiper-item>標簽傳入數據
更新時間：2017年05月08日 15:39:15 投稿：lqh
這篇文章主要介紹了微信小程序 <swiper-item>標簽傳入數據的相關資料,需要的朋友可以參考下
微信小程序 <swiper-item>標簽傳入數據
在<swiper-item>中用for循環(huán)傳入多個成對不同數據時的實現方法。
看下效果圖：
遍歷實現方法：wxss省略：
wxml中代碼：
<!--導航部分輪播圖-->
<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>
相對應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:'順風車'},
],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家介紹了JavaScript中單例模式的應用場景案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
強制設為首頁代碼...2006-06-06
超級強大的表單驗證...2006-06-06
這篇文章主要介紹了微信小程序 微信支付服務端集成實例詳解及源碼下載的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序實現多個按鈕toggle功能的實例的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 swiper制作tab切換實現代碼的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了fetch-event-source庫源碼學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了前端使用koa實現大文件分片上傳示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了arrify 轉數組實現示例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了JS實現一個微信錄音功能過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02