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