uniapp之 页面滑动 组件

思路:滑动页面的时候监听手势,判断是左滑还是右滑,组件里面接收 list 和 index 然后左滑 index+1  右滑动 index-1,注意判断数组边界

1.在项目根目录下创建  component文件夹 新建vue文件  swiperAction.vue  如下  代码如下

<!--
1、新建 组件.vue 文件
2、组件文档结构
3.三个手势监听 参考 nuiapp 文档-->

<template name="swiperAction">
    <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend ">
        <slot>

        </slot>
    </view>
</template>
<script>
    export default {
        name: "swiperAction",
        data() {
            return {
                startX: 0,
                startY: 0,
            }
        },
       //组件生命周期
        created: function(e) {
            console.log("创建了组件");
        },
        mounted() {
            // console.log("组件加载完成");
        },
        methods: {
            tonext: function(obj) {

            },
            touchstart: function(event) {
                console.log("滑动开始");
                this.startTime = Date.now();
                this.startX = event.changedTouches[0].clientX;
                this.startY = event.changedTouches[0].clientY;
                // console.log(this.startX);
                // console.log(this.startY);

            },
            touchmove: function(event) {
                // console.log("滑动中");

            },
            touchend: function(event) {
                console.log("滑动结束");
                const endTime = Date.now();
                const endX = event.changedTouches[0].clientX;
                const endY = event.changedTouches[0].clientY;

                //判断按下的时间 时间太长表示不是滑动
                if (endTime - this.startTime > 2000) {
                    return;
                }
                //滑动方向
                let direction = "";
                //判断滑动的距离 这里超过10算滑动
                if (Math.abs(endX - this.startX) > 10) {
                    //判断方向
                    direction = endX - this.startX > 0 ? "right" : "left";
                } else {
                    return;
                }
                
                this.$emit("swiperAction",{direction});

            },
        }
    }
</script>
<style>

</style>

2.页面引用  在页面中添加滑动组件的监听即可,然后在里面写页面跳转逻辑

 

<template>
    <swiperAction @swiperAction="swiperAction">
        <view>
            <view class="page-section-spacing">
                <image :src="image_path+datail.product_image" mode="widthFix" @error="imageError"></image>

            </view>

            <!-- <view class="datail">
            <image class="datail-img" mode="widthFix" :src="image_path+datail.product_image" ></image>
        </view> -->
            <view class="article-meta">
                <text class="article-author">{{datail.product_name}}</text>
            </view>
            <view class="article-meta">
                <text class="article-time">￥{{datail.price}}</text>
            </view>
        </view>
    </swiperAction>
</template>
<script>
    // 1、引用组件
    import swiperAction from "../../component/swiperAction.vue";
    // import godetail from '@/component/goDetail';
    // 2、注册组件
    export default {
        components: {
            swiperAction
        },
        data() {
            return {
                image_path: "http://h5.c-lap.cn/thinkphp5",
                datail: {},
                list: [],
                index: 0,
                requestParams: {
                    product_type: "2",
                    product_id: 0,
                },
            }
        },
        onShareAppMessage() {
            return {
                title: this.datail.title,
                path: '/pages/detail/detail?query=' + JSON.stringify(this.datail)
            }
        },
        onLoad(event) {
            console.log(getApp().globalData);

            this.list = getApp().globalData.imglist;
            this.index = getApp().globalData.index;
            this.datail = this.list[this.index];
            this.requestParams.product_type = this.datail.product_type;
            this.requestParams.product_id = this.datail.product_id;
            // this.getDetail();
        },
        methods: {

            getDetail() {
                // "openid":"oMK4os725QlKDCUD97LlZkxRLtvg",
                // "product_type":"1",
                // "product_id":"12"
                uni.request({
                    url: 'https://weixin.c-lap.cn/wx/public/index/product/product_info',
                    data: this.requestParams,
                    method: 'POST',
                    success: (res) => {
                        this.datail = res.data.result.data_product;
                        console.log(this.datail);
                    }
                });
            },

            swiperAction(event) {
                console.log(event);
                //
                // console.log(this.index);
                // console.log(this.list.length);
                if (event.direction === 'left' && this.index < this.list.length - 1) {
                    this.index++;
                    this.datail = this.list[this.index];
                    console.log(this.datail);

                } else if(event.direction === 'right' && this.index > 1) {
                    this.index--;
                    this.datail = this.list[this.index];
                    console.log(this.datail);

                } else {
                    uni.showToast({
                        title: '没有了',
                        icon: "none",
                        duration: 2000
                    });

                }

            }

        }
    }
</script>
<style>
    .datail {
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .page-section-spacing {
        width: 100%;
    }

    .datail-img {
        width: 100%;
    }
</style>