微信小程序使用swiper实现侧滑功能

来源:互联网 发布:手机隔墙听软件 编辑:程序博客网 时间:2024/05/29 03:25

在很多的框架中,都有一个侧滑的组件,命名基本都是叫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);  },})

2017-12-08补:新写了一篇不使用控制自动滚动的代码传送门
希望大家能有自己的见解。所以我就不讲述自己的思路,有兴趣的情扣1738731967