您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序實現頂部、底部滑動(dòng)聯動(dòng)
發表時間:2021-3-31
發布人:葵宇科技
浏覽次數:65
這個(gè)場景一般用于展示數據時,數據過多,每條一行顯示不下(xià),表頭可(kě)以橫向滑動(dòng),下(xià)面要顯示的數據部分橫向縱向都可(kě)以滑動(dòng)。表頭或下(xià)面數據部分橫向滑動(dòng)的時候,兩部分可(kě)以進行聯動(dòng)
具體效果像這樣(随便寫的醜樣式布局)
說說原理,主要是使用兩個(gè)scroll-view組件,然後監聽兩個(gè)scroll-view的滑動(dòng)事件,然後根據滑動(dòng)的scroll-view橫向滑動(dòng)的距離(lí),通(tōng)過scroll-left來設置另一個(gè)scroll-view滑動(dòng)的距離(lí)
首先WXML代碼:
<scroll-view style='width:100%;height:100rpx;border:1px solid #f00;' scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
<view style='height:300rpx;background:#00f;width:1000rpx;margin-bottom:10rpx;float:left;color:#fff;'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
</scroll-view>
<scroll-view style='width:100%;height:1000rpx;border:1px solid #f00;' scroll-x scroll-yscroll-left='{{title_x}}' bindscroll='bindscroll' bindtouchstart='bindtouchstart' data-types='data'>
<view style='height:300rpx;background:#f00;width:1000rpx;margin-bottom:10rpx;float:left;' wx:for='{{[1,1,1,11,1,1,1,1,1,11,1,1,1]}}'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
</scroll-view>
然後JS代碼:
let ifs=true;//這裡添加一個(gè)開關(guān),因為在設置一個(gè)scroll的滑動(dòng)距離(lí)的時候會觸發這個(gè)scroll的滑動(dòng)事件,從而執行裡面的事件,這樣會做很多多餘的操作,影響性能
Page({
data: {
title_x:0
},
//在開發者工具上前幾次滑動(dòng)會很慢,估計幾秒後另一個(gè)才會滑動(dòng),手機上不會,在手機和(hé)開發者工具上滑動(dòng)的時候有大概幾百毫秒延遲,可(kě)以忽略不計,我覺得是因為兩個(gè)地方的滑動(dòng)都要頻繁的使用setData操作,所以會出現這些情況,如(rú)果大家發現是其他原因引起的、有錯誤或有其他好的方法,請留言,謝謝
//判斷是那個(gè)部分在滑動(dòng)
bindtouchstart(e){
const types=e.currentTarget.dataset.types;
ifs=(types=='title');//
console.log(ifs);
},
//下(xià)面紅色部分滑動(dòng)
bindscroll(e){
let move = e.detail.scrollLeft,//獲取下(xià)面紅色部分的橫向滑動(dòng)距離(lí)
title_x=this.data.title_x;
if (title_x!=move&&!ifs){//監聽srcoll滑動(dòng)事件,判斷下(xià)面紅色部分與左邊的距離(lí)和(hé)藍色部分與左邊的距離(lí)是否相等,相等的話就是縱向滑動(dòng),否則就是橫向滑動(dòng),隻有橫向滑動(dòng)的時候才改變藍色部分滑動(dòng)的距離(lí)
this.setData({//這裡需要實時渲染
title_x: move
});
}
},
//藍色部分滑動(dòng)
titlebindscroll(e){
const move = e.detail.scrollLeft;//獲取藍色部分滑動(dòng)的距離(lí)
if(ifs){
this.setData({//更新下(xià)面紅色距離(lí)左邊的距離(lí),這裡是滑動(dòng)藍色部分然後設置下(xià)面滑動(dòng)的距離(lí),所以要用setData進行渲染
title_x:move
});
}
},
onLoad: function (options) {
}
})
在開發者工具上前幾次滑動(dòng)會很慢,估計幾秒後另一個(gè)才會滑動(dòng),手機上不會。
在手機和(hé)開發者工具上滑動(dòng)的時候有大概幾百毫秒延遲,可(kě)以忽略不計,
我覺得是因為兩個(gè)地方的滑動(dòng)都要頻繁的使用setData操作,所以會出現這些情況。
如(rú)果大家發現是其他原因引起的、有錯誤或有其他好的方法,請留言,謝謝