在<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, } })