参考文章:Uniapp自定义swiper滑动模块_qiebzps的博客-CSDN博客
第一种使用的是swiper里使用swiper-item,在swiper-item上添加scroll-view来实现,因为使用的是手机是苹果手机,效果能达到,点击顶部分类,下面界面切换,滑动下面界面,顶部分类切换,但是安卓上运行会出现卡顿情况,这个方法被废弃了
第二种使用的是直接通过view 来实现,通过overflow和@touchstart @touchend 来实现,确实能达到效果,但是客户说滑动界面没有根据手势动,这个方法也被废弃
第三种方法是以下方法,模仿参考文章写的
@touchend="handletouchend" @touchmove="touchmoveEvent"> //statueArr 是顶部分类 //listArr 是新闻列表内容 //item_view上是列表布局
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 --
}
}
}