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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值