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>