微信小程序<swiper-item>标签中传入多个数组型数据的方法(小程序交流群:604788754)

在<swiper-item>中用for循环传入多个成对不同数据时的实现方法。

效果如下:

遍历实现方法: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,
  }
  
})

本个实例不懂之处,加群请咨询群主。

posted @ 2017-05-05 17:55  生如逆旅,一苇以航  阅读(12896)  评论(0编辑  收藏  举报