Uniapp自定义swiper滑动模块 秒速五厘米 2022-12-01 15:43 619阅读 0赞 ### Uniapp自定义swiper滑动模块 ### * 简介 * 参考文章 * 上代码 # 简介 # 用Uniapp写的App端swiper滑动模块,主要是理解原理,如果后期有可能的话再优化成组件。本篇文章主要参考[卧龙派][Link 1]的文章[手把手教你用原生js来写一个swiper滑块插件(上)原理][js_swiper],感谢分享。 # 参考文章 # 1. [手把手教你用原生js来写一个swiper滑块插件(上)原理][js_swiper] 2. [vue:Class 与 Style 绑定][vue_Class _ Style] # 上代码 # 我就耍一次流氓吧先,主要内容看参考文章,以后有时间再详细补上。 <template> <view> <view> <p>abc</p> </view> <view class="ps-swiper"> <view :class="{'ps-swiper-container':isTrue,'move':isMove}" @touchstart="touchstartEvent" @touchmove="touchmoveEvent" @touchend="touchendEvent" :style="{ left: initLeft + 'rpx' }"> <view class="ps-swiper-item" style="background-color: #007AFF;">1</view> <view class="ps-swiper-item" style="background-color: #aa00ff;">2</view> <view class="ps-swiper-item" style="background-color: #ffff7f;">3</view> </view> </view> </view> </template> <script> export default { data() { return { isTrue:true, isMove:false,//控制是否应用move类 state: 0, //监控鼠标事件,鼠标落下之后才开始动作 oldEvent: null, // 用来记录鼠标上次的位置 initLeft: 0, //rpx ;//ps-swiper-container初始left值 initIndex: 0, // 记录当前滑块的顺序(从0开始) moveLeft: 0, } }, onLoad() { console.log(this.initLeft); }, methods: { flashIndex: function() { }, touchstartEvent: function(event) { // console.log(event); this.isMove = false; this.moveLeft = 0; this.oldEvent = event; // 当鼠标按下时候记录初始位置 this.state = 1; //console.log("event 事件:"+event.touches[0].pageX); console.log("手指按下了"); }, touchmoveEvent: function(event) { if (this.state != 1) { return }; // 只有当state == 1时候才允许执行该事件 this.moveStart = event.touches[0].pageX; // 用当前鼠标的位置来和上次鼠标的位置作比较 // 如果当前鼠标的pageX小于上次鼠标的pageX,那就表示鼠标在向左拖动,就需要把容器left值减去鼠标移动的距离 if (event.touches[0].pageX < this.oldEvent.touches[0].pageX) { this.initLeft -= this.oldEvent.touches[0].pageX - event.touches[0].pageX; // this.initLeft -= 300; this.moveLeft++; } else { this.initLeft += event.touches[0].pageX - this.oldEvent.touches[0].pageX; this.moveLeft--; } // 完事之后记得把当前鼠标的位置赋值给oldEvent this.oldEvent = event; // console.log(this.initLeft); // console.log("手指移动了"); }, touchendEvent: function(event) { // console.log(event); console.log("this.moveLeft" + this.moveLeft); if (this.moveLeft > 3) { this.initIndex++; if(this.initIndex==3){ this.initIndex--;}//右边界,不能滑动到超一屏 } else if (this.moveLeft < -3){ this.initIndex--; if (this.initIndex < 0) { this.initIndex = 0; } //左边界,不能滑动到负一屏 } this.isMove = true; console.log("this.initIndex" + this.initIndex); this.initLeft = this.initIndex * -300; this.state = 0; console.log("手指起来了"); } } } </script> <style> .ps-swiper { width: 300rpx; /* 下面是为了让大家看的更清楚,加的修饰 */ padding: 30rpx 0; margin: 0 auto; background: #FFB973; } .ps-swiper .ps-swiper-container { position: relative; /* 为啥要设置-300px呢,因为我想让他默认在第二个滑块的位置,一会会给大家演示 */ /* left: -300rpx; */ /* 让容器尽可能的宽,这样才能容纳更多的滑块 */ width: 10000%; /* 让内部滑块可以排成一行 */ display: flex; /* 滑动时有动画:如果元素的left值变更,会有一个0.2s的过渡动画(补间动画) */ /* transition: left 0.2s ease-in-out; */ /* 下面是为了让大家看的更清楚,加的修饰 */ background: red; padding: 15rpx 0; } .move { transition: left 0.2s ease-in-out; } .ps-swiper .ps-swiper-container .ps-swiper-item { /* 宽度设置1%会按照外层视图的宽度来铺满 */ width: 1%; height: 375rpx; background: #eee; } </style> [Link 1]: https://me.csdn.net/zfzhuman123 [js_swiper]: https://blog.csdn.net/zfzhuman123/article/details/90520355 [vue_Class _ Style]: https://cn.vuejs.org/v2/guide/class-and-style.html
还没有评论,来说两句吧...