- 使用微信小程序原生组件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);
- }
- });
- }
- })
- 由于微信小程序不能直接操作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
- });
- }
- });