脚本宝典收集整理的这篇文章主要介绍了微信小程序小技巧系列《一》幻灯片,tab导航切换,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
幻灯片
<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导航切换
<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
});
}
});
转自:转载地址
以上是脚本宝典为你收集整理的微信小程序小技巧系列《一》幻灯片,tab导航切换全部内容,希望文章能够帮你解决微信小程序小技巧系列《一》幻灯片,tab导航切换所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。