swiper
小程序自定义轮播; 样式展示
代码: <view class="show_swiper" style='width: {{winWidth}}px;height: {{winHeight}}px;'> <view class='show_swiper_list' bindtouchstart='swiperTouchstart' bindtouchmove='swiperTouchmove' bindtouchend='swiperTouchend' style='width: {{allWidth}}px;position: relative;left: {{(winWidth-itemWidth)/2}}px;'> <block wx:for="{{swiperList}}"> <view class='swiper_item' data-curid="{{curIndex}}" data-index='{{index}}' animation="{{curIndex == index? animationToLarge : animationToSmall}}" style='width: {{itemWidth}}px;height: {{itemWidth*1.4}}px;transform: scale({{curIndex == index ? 1 : scale}});-'> {{item}} </view> </block> </view> </view> 主要事件; //触摸开始的事件 swiperTouchstart: function (e) { // console.log('touchstart',e); let startClinetX = e.changedTouches[0].clientX; this.setData({ startClinetX: startClinetX, //触摸开始位置; startTimestamp: e.timeStamp, //触摸开始时间; }) }, //触摸移动中的事件 swiperTouchmove: function (e) { // console.log('touchmove',e); }, //触摸结束事件 swiperTouchend: function (e) { // console.log("触摸结束",e); let times = e.timeStamp - this.data.startTimestamp, //时间间隔; distance = e.changedTouches[0].clientX - this.data.startClinetX; //距离间隔; //判断 if (times < 500 && Math.abs(distance) > 10) { let curIndex = this.data.curIndex; let x0 = this.data.itemWidth,x1 = this.data.translateDistance,x = 0; if ( distance > 0) { curIndex = curIndex - 1 if(curIndex < 0){ curIndex = 0; x0 = 0; } x = x1 + x0; } else { // console.log('+1',x); curIndex = curIndex + 1 if (curIndex >= this.data.swiperList.length) { curIndex = this.data.swiperList.length-1; x0 = 0; } x = x1 - x0; } this.animationToLarge(curIndex, x); this.animationToSmall(curIndex, x); this.setData({ curIndex: curIndex, translateDistance: x }) } else { } }, // 动画 animationToLarge: function (curIndex,x) { this.animation.translateX(x).scale(1).step() this.setData({ animationToLarge: this.animation.export() }) }, animationToSmall: function (curIndex,x) { this.animation.translateX(x).scale(0.7).step() this.setData({ animationToSmall: this.animation.export() }) }, |
小程序自定义轮播--类旋转木马
发布:2018-04-26 12:09浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08