微信小程序使用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
阅读全文
1 0
- 微信小程序使用swiper实现侧滑功能
- 微信小程序--使用swiper实现滚动广告
- 微信小程序swiper使用注意
- 微信小程序例子——使用swiper组件实现图片切换
- 微信小程序:使用swiper与scroll-view实现tab选项卡(2)
- 微信小程序 swiper 应用
- vue+swiper实现自定义侧滑菜单
- 微信小程序swiper实现轮播图,可触发点击事件
- (四)微信小程序之实现轮番效果(swiper)
- 微信小程序开发一swiper轮播图的简单实现
- 微信小程序swiper组件实现图片宽度自适应
- 微信小程序swiper组件实现图片宽度自适应
- 学习笔记_微信小程序开发--组建Swiper的使用
- 微信小程序之swiper轮播图
- 微信小程序入门之swiper
- 微信小程序中的swiper组件
- 微信小程序----组件之swiper
- 微信小程序swiper滑动页面
- 第三次作业
- VMware 虚拟化编程(12) — VixDiskLib Sample 程序使用
- php程序死循环导致502报错
- 深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接
- C 循环
- 微信小程序使用swiper实现侧滑功能
- Unix-Linux编程实践教程——第十一章
- Netty4实战第十二章:SPDY
- zookeeper安装过程
- Pip 国内源的使用
- Java并发编程之原子变量
- 命令模式
- Akka(29): Http:Server-Side-Api,Low-Level-Api
- JavaWeb之Jetty和Tomcat内嵌服务器实现