Uniapp自定义swiper滑动模块

秒速五厘米 2022-12-01 15:43 627阅读 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