微信小程序小技巧系列《一》幻灯片，tab导航切换
发布：2018-01-31 10:39浏览：
次来源：网络 作者：cola
幻灯片
<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
});
}
});
|
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
