在很多的框架中，都有一個側滑的元件，命名基本都是叫toolbar之類的，而且他的功能也是基本類似，

使用swiper的話，可以實現它的側滑功能，具體實現如下：

 <view>點選下方文字切換</view><view bindtap='view1' class='bluechose'>藍色</view><view bindtap='view2' class="greenchose">綠色</view><swiper autoplay='{{isauto}}' duration='100' interval="100" bindchange='getswiper'>  <swiper-item>    <view style="background:#0000ff;height:150px;"></view>  </swiper-item>  <swiper-item>    <view style="background:#00ff00;height:150px;"></view>  </swiper-item></swiper>


<view>點選下方文字切換</view>
<view bindtap='view1' class='bluechose'>藍色</view>
<view bindtap='view2' class="greenchose">綠色</view>
<swiper autoplay='{{isauto}}' duration='100' interval="100" bindchange='getswiper'>
  <swiper-item>
    <view style="background:#0000ff;height:150px;"></view>
  </swiper-item>
  <swiper-item>


查詢
無結果

/pages/index/index.wxml 
 

Page({

  data: {
    nowcurrentindex: 0,
    isauto: false,
  },
  getswiper: function (e) {
    console.log(e.detail.current);
    this.data.nowcurrentindex = e.detail.current;
  },
  view1: function () {
    var _this = this;
    if (this.data.nowcurrentindex == 0) {
      return false;
    }
    this.data.isauto = true;
    this.setData(this.data);
    setTimeout(function () {
      _this.data.isauto = !_this.data.isauto;
      _this.setData(_this.data);
      console.log(_this.data.isauto);
    }, 150);
  },
  view2: function () {
    var _this = this;
    if (this.data.nowcurrentindex == 1) {
      return false;
    }
    var _this = this;
    this.data.isauto = true;
    this.setData(this.data);
    setTimeout(function () {
      _this.data.isauto = !_this.data.isauto;
      _this.setData(_this.data);
      console.log(_this.data.isauto);
    }, 150);
  },

})