參考文章：Uniapp自定義swiper滑動(dòng)模塊_qiebzps的博客-CSDN博客
第一種使用的是swiper里使用swiper-item狂丝，在swiper-item上添加scroll-view來(lái)實(shí)現(xiàn)，因?yàn)槭褂玫氖鞘謾C(jī)是蘋果手機(jī)，效果能達(dá)到，點(diǎn)擊頂部分類，下面界面切換否彩，滑動(dòng)下面界面，頂部分類切換，但是安卓上運(yùn)行會(huì)出現(xiàn)卡頓情況腕巡，這個(gè)方法被廢棄了
第二種使用的是直接通過(guò)view 來(lái)實(shí)現(xiàn)，通過(guò)overflow和@touchstart?@touchend 來(lái)實(shí)現(xiàn)跷叉，確實(shí)能達(dá)到效果逸雹，但是客戶說(shuō)滑動(dòng)界面沒有根據(jù)手勢(shì)動(dòng)，這個(gè)方法也被廢棄
第三種方法是以下方法云挟，模仿參考文章寫的
<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 是新聞列表內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? <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, //監(jiān)控鼠標(biāo)事件梆砸，鼠標(biāo)落下之后才開始動(dòng)作
oldEvent: null, // 用來(lái)記錄鼠標(biāo)上次的位置
initLeft: 0, //rpx ;//ps-swiper-container初始left值
initIndex: 0, // 記錄當(dāng)前滑塊的順序（從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
}; // 只有當(dāng)state == 1時(shí)候才允許執(zhí)行該事件
// 用當(dāng)前鼠標(biāo)的位置來(lái)和上次鼠標(biāo)的位置作比較
// 如果當(dāng)前鼠標(biāo)的pageX小于上次鼠標(biāo)的pageX，那就表示鼠標(biāo)在向左拖動(dòng)园欣，就需要把容器left值減去鼠標(biāo)移動(dòng)的距離
if (event.touches[0].pageX < this.oldEvent.touches[0].pageX) {
// 向左移動(dòng)
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){
// 向右移動(dòng)
this.initLeft += event.touches[0].pageX - this.oldEvent.touches[0].pageX;
this.moveLeft--;
console.log(this.initLeft)
}
// 完事之后記得把當(dāng)前鼠標(biāo)的位置賦值給oldEvent
this.oldEvent = event;
// console.log("手指移動(dòng)了");
},
handletouchstart(event) {
this.touchY = event.changedTouches[0].clientY;
this.moveLeft = 0;
this.oldEvent = event; // 當(dāng)鼠標(biāo)按下時(shí)候記錄初始位置
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;
} //右邊界帖世，不能滑動(dòng)到超一屏
// console.log(8888888)
}
else if (this.moveLeft < -4) {
this.selectStatue--;
if (this.selectStatue < 0) {
this.selectStatue = 0;
} //左邊界，不能滑動(dòng)到負(fù)一屏
// console.log(44444444)
}
this.initLeft = this.selectStatue * -750;
this.state = 0;
this.scrollTop --
}
}
}
</script>
