微信小程序 <swiper-item>標簽傳入數(shù)據(jù)

更新時間：2017年05月08日 15:39:15 投稿：lqh

這篇文章主要介紹了微信小程序 <swiper-item>標簽傳入數(shù)據(jù)的相關資料,需要的朋友可以參考下

在<swiper-item>中用for循環(huán)傳入多個成對不同數(shù)據(jù)時的實現(xiàn)方法。

看下效果圖：

遍歷實現(xià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,
 }
 
})

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

微前端框架qiankun源碼剖析之下篇
這篇文章主要為大家介紹了微前端框架qiankun源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
Javascript中綁定click事件的四種方式介紹
今天小編就為大家分享一篇關于Javascript中綁定click事件的四種方式介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-10-10
前端工程化cjs?umd?esm?打包差異詳解
這篇文章主要為大家介紹了前端工程化cjs?umd?esm?打包差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
前端可視化搭建定義聯(lián)動協(xié)議實現(xiàn)
這篇文章主要為大家介紹了前端可視化搭建定義聯(lián)動協(xié)議實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
9個JavaScript日常開發(fā)小技巧
這篇文章主要介紹了9個JavaScript日常開發(fā)小技巧，,需要的朋友可以參考下
2020-10-10
微信小程序 wxapp視圖容器 view詳解
這篇文章主要介紹了微信小程序 wxapp視圖容器 view詳解的相關資料,附簡單實例和實現(xiàn)效果圖，幫助大家學習參考，需要的朋友可以參考下
2016-10-10
前端JS實現(xiàn)太極圖案圖文示例
這篇文章主要為大家介紹了前端JS實現(xiàn)太極圖案圖文示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
微信小程序 <swiper-item>標簽傳入數(shù)據(jù)
這篇文章主要介紹了微信小程序 <swiper-item>標簽傳入數(shù)據(jù)的相關資料,需要的朋友可以參考下
2017-05-05
await vs return vs return await關鍵區(qū)別
這篇文章主要為大家介紹了await vs return vs return await關鍵區(qū)別解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
UMD的包導出TS 類型方法示例
這篇文章主要為大家介紹了UMD的包導出TS 類型方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08