思路:滑动页面的时候监听手势,判断是左滑还是右滑,组件里面接收 list 和 index 然后左滑 index+1 右滑动 index-1,注意判断数组边界
1.在项目根目录下创建 component文件夹 新建vue文件 swiperAction.vue 如下 接收一个 list 和一个 index 代码如下
<!--
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,
}
},
//属性
props: {
list: Array,
index: Number
},
//组件生命周期
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.页面引用
<script>
// 1、引用组件
import swiperAction from "../../component/swiperAction.vue";
// import godetail from ‘@/component/goDetail‘;
// 2、注册组件
export default {
components: {
swiperAction
},
不详细说了 直接上页面代码
<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 === ‘left‘) {
uni.showToast({
title: ‘到底了‘,
duration: 2000
});
}
}
if (event.direction === ‘right‘ && this.index > 1) {
this.index--;
this.datail = this.list[this.index];
console.log(this.datail);
} else {
if (event.direction === ‘right‘) {
uni.showToast({
title: ‘没有了‘,
duration: 2000
});
}
}
}
}
}
</script>
<style>
.datail {
overflow: hidden;
position: relative;
background-color: #ccc;
}
.page-section-spacing {
width: 100%;
}
.datail-img {
width: 100%;
}</style>