幻灯片，tab导航切换

作者：模板之家 2018-1-25 11:40 7602人关注

使用微信小程序原生组件swiper实现。 swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} block wx:for={{imgUrls}} wx:key=index swiper-item image src ...

使用微信小程序原生组件swiper实现。

<swiper

      indicator-dots="{{indicatorDots}}"

      autoplay="{{autoplay}}"

      interval="{{interval}}"

      duration="{{duration}}">

      <block wx:for="{{imgUrls}}" wx:key="index">

         <swiper-item>

            <image src="{{item}}" class="slide-image"

            mode="scaleToFill"/>

         </swiper-item>

      </block>

</swiper>

配合在逻辑页面配置数据实现幻灯片

Page({
data: {
imgUrls: [],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
},
onLoad: function(){
util.ajax({
url: 'https://api.zg5v.com/index.php/index/show/banner',
data: {
uid: 194
},
cb: function(res) {
setSilde.call(self, res.data.data);
}
});
}
})

tab导航切换

由于微信小程序不能直接操作DOM，所以这里设置一个data-id值。(data-id="{{index}}" )用来模拟DOM操作，来实现导航内容的切换

<view class="nav-warp">

      <view class="tab">

         <block wx:for="{{navItem}}" wx:key="index">

            <text bindtap="navToggle"

                  data-id="{{index}}"

                  class="tab-txt

                        {{showItem == index ? 'active' : '' }}">

                  {{item}}

            </text>

         </block>

      </view>

</view>