uniapp 用view實(shí)現(xiàn)新聞列表滑動(dòng)的效果

參考文章: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>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末沸枯,一起剝皮案震驚了整個(gè)濱河市日矫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绑榴,老刑警劉巖哪轿,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異翔怎,居然都是意外死亡窃诉,警方通過(guò)查閱死者的電腦和手機(jī)杨耙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)飘痛,“玉大人珊膜,你說(shuō)我怎么就攤上這事⌒觯” “怎么了车柠?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)塑猖。 經(jīng)常有香客問(wèn)我竹祷,道長(zhǎng),這世上最難降的妖魔是什么萌庆? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任溶褪,我火速辦了婚禮,結(jié)果婚禮上践险,老公的妹妹穿的比我還像新娘猿妈。我一直安慰自己,他們只是感情好巍虫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布彭则。 她就那樣靜靜地躺著,像睡著了一般占遥。 火紅的嫁衣襯著肌膚如雪俯抖。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天瓦胎,我揣著相機(jī)與錄音芬萍,去河邊找鬼。 笑死搔啊,一個(gè)胖子當(dāng)著我的面吹牛柬祠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播负芋,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼漫蛔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了旧蛾?” 一聲冷哼從身側(cè)響起莽龟,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锨天,沒想到半個(gè)月后毯盈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡病袄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年奶镶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迟赃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陪拘。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡厂镇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出左刽,到底是詐尸還是另有隱情捺信,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布欠痴,位于F島的核電站迄靠,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏喇辽。R本人自食惡果不足惜掌挚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望菩咨。 院中可真熱鬧吠式,春花似錦、人聲如沸抽米。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)云茸。三九已至是目,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間标捺,已是汗流浹背懊纳。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留亡容,地道東北人嗤疯。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萍倡,于是被迫代替她去往敵國(guó)和親身弊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361