Uniapp自定义swiper滑动模块

简介

用Uniapp写的App端swiper滑动模块，主要是理解原理，如果后期有可能的话再优化成组件。本篇文章主要参考卧龙派的文章手把手教你用原生js来写一个swiper滑块插件（上）原理，感谢分享。

参考文章

1. 手把手教你用原生js来写一个swiper滑块插件（上）原理
2. 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>