作者: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
});
}
});
轉自:轉載地址