作者：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 }); } });

转自：转载地址