参考文章：Uniapp自定义swiper滑动模块_qiebzps的博客-CSDN博客
第一种使用的是swiper里使用swiper-item，在swiper-item上添加scroll-view来实现，因为使用的是手机是苹果手机，效果能达到，点击顶部分类，下面界面切换，滑动下面界面，顶部分类切换，但是安卓上运行会出现卡顿情况，这个方法被废弃了
第二种使用的是直接通过view 来实现，通过overflow和@touchstart @touchend 来实现，确实能达到效果，但是客户说滑动界面没有根据手势动，这个方法也被废弃
第三种方法是以下方法，模仿参考文章写的
<template>
<view style="overflow: hidden; width: 100%;height: 100%;">
<view class="list_bg_view" >
<view class="list_bgView" :class="{'list_bgView':isTrue}" :style="{'margin-top':titleHeight+ 'px',left: initLeft + 'rpx','overflow':'hidden'}" @touchstart="handletouchstart"
@touchend="handletouchend" @touchmove="touchmoveEvent">
//statueArr 是顶部分类
<view class="list_view" v-for="(stateItem,stateindex) in statueArr" :key="stateindex">
<scroll-view :scroll-y="true" :style="{height:screenHeight-titleHeight-49+'px'}" :scroll-top="scrollTop" class="list_scroll">
//listArr 是新闻列表内容
<view class="item_view" v-for="(item,index) in listArr" :key="index">
//item_view上是列表布局
</view>
</scroll-view >
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: -1,
touchX: 0,
isTrue: true,
state: 0, //监控鼠标事件，鼠标落下之后才开始动作
oldEvent: null, // 用来记录鼠标上次的位置
initLeft: 0, //rpx ;//ps-swiper-container初始left值
initIndex: 0, // 记录当前滑块的顺序（从0开始）
moveLeft: 0,
statusBarHeight:0,
titleHeight:0
}
},
onLoad() {
const res = uni.getSystemInfoSync()
const system = res.platform
this.statusBarHeight = res.statusBarHeight
this.titleHeight = (44 + this.statusBarHeight )
},
methods: {
touchmoveEvent(event) {
if (this.state != 1) {
return
}; // 只有当state == 1时候才允许执行该事件
// 用当前鼠标的位置来和上次鼠标的位置作比较
// 如果当前鼠标的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.moveLeft++;
console.log(this.initLeft)
} else if (event.touches[0].pageX > this.oldEvent.touches[0].pageX){
// 向右移动
this.initLeft += event.touches[0].pageX - this.oldEvent.touches[0].pageX;
this.moveLeft--;
console.log(this.initLeft)
}
// 完事之后记得把当前鼠标的位置赋值给oldEvent
this.oldEvent = event;
// console.log("手指移动了");
},
handletouchstart(event) {
this.touchY = event.changedTouches[0].clientY;
this.moveLeft = 0;
this.oldEvent = event; // 当鼠标按下时候记录初始位置
this.state = 1;
this.initLeft = this.selectStatue * -750;
// console.log("手指按下了");
},
handletouchend(event) {
// console.log("this.moveLeft===" + this.moveLeft);
const subY = event.changedTouches[0].clientY - this.touchY
if (subY > 50 || subY < -50) {
// console.log('上下滑')
}else{
if (this.moveLeft > 4) {
this.selectStatue++;
if (this.selectStatue >= 4) {
this.selectStatue = 4;
} //右边界，不能滑动到超一屏
// console.log(8888888)
}
else if (this.moveLeft < -4) {
this.selectStatue--;
if (this.selectStatue < 0) {
this.selectStatue = 0;
} //左边界，不能滑动到负一屏
// console.log(44444444)
}
this.initLeft = this.selectStatue * -750;
this.state = 0;
this.scrollTop --
}
}
}
</script>
