微信小程序小技巧系列《一》幻灯片，tab导航切换

作者：gou-tian

来自：github

幻灯片

使用微信小程序原生组件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>

用于模拟DOM操作

Page({
data: {
showItem: 0
},
navToggle: function(e){
this.setData({
showItem: e.target.dataset.id
});
util.dataList.call(this, {
url: 'https://api.zg5v.com/index.php/index/show/qtshow',
data: {
uid: 148,
fenid: e.target.dataset.id - 1,
num: 0
},
cb: util.petAge
});
}
});

转自：转载地址