小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)頂部、底部滑動聯(lián)動

發(fā)布時間:2018-05-05 14:49 所屬欄目:小程序開發(fā)教程

這個場景一般用于展示數(shù)據(jù)時,數(shù)據(jù)過多,每條一行顯示不下,表頭可以橫向滑動,下面要顯示的數(shù)據(jù)部分橫向縱向都可以滑動。表頭或下面數(shù)據(jù)部分橫向滑動的時候,兩部分可以進(jìn)行聯(lián)動

具體效果像這樣(隨便寫的丑樣式布局)

說說原理,主要是使用兩個scroll-view組件,然后監(jiān)聽兩個scroll-view的滑動事件,然后根據(jù)滑動的scroll-view橫向滑動的距離,通過scroll-left來設(shè)置另一個scroll-view滑動的距離

首先WXML代碼:

 

				
  1. <scroll-view style='width:100%;height:100rpx;border:1px solid #f00;' scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
  2. <view style='height:300rpx;background:#00f;width:1000rpx;margin-bottom:10rpx;float:left;color:#fff;'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
  3.  
  4. </scroll-view>
  5. <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'>
  6. <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>
  7.  
  8. </scroll-view>

然后JS代碼:

 

				
  1. let ifs=true;//這里添加一個開關(guān),因為在設(shè)置一個scroll的滑動距離的時候會觸發(fā)這個scroll的滑動事件,從而執(zhí)行里面的事件,這樣會做很多多余的操作,影響性能
  2. Page({
  3. data: {
  4. title_x:0
  5. },
  6. //在開發(fā)者工具上前幾次滑動會很慢,估計幾秒后另一個才會滑動,手機(jī)上不會,在手機(jī)和開發(fā)者工具上滑動的時候有大概幾百毫秒延遲,可以忽略不計,我覺得是因為兩個地方的滑動都要頻繁的使用setData操作,所以會出現(xiàn)這些情況,如果大家發(fā)現(xiàn)是其他原因引起的、有錯誤或有其他好的方法,請留言,謝謝
  7. //判斷是那個部分在滑動
  8. bindtouchstart(e){
  9. const types=e.currentTarget.dataset.types;
  10. ifs=(types=='title');//
  11. console.log(ifs);
  12. },
  13. //下面紅色部分滑動
  14. bindscroll(e){
  15. let move = e.detail.scrollLeft,//獲取下面紅色部分的橫向滑動距離
  16. title_x=this.data.title_x;
  17. if (title_x!=move&&!ifs){//監(jiān)聽srcoll滑動事件,判斷下面紅色部分與左邊的距離和藍(lán)色部分與左邊的距離是否相等,相等的話就是縱向滑動,否則就是橫向滑動,只有橫向滑動的時候才改變藍(lán)色部分滑動的距離
  18. this.setData({//這里需要實時渲染
  19. title_x: move
  20. });
  21. }
  22.  
  23. },
  24. //藍(lán)色部分滑動
  25. titlebindscroll(e){
  26. const move = e.detail.scrollLeft;//獲取藍(lán)色部分滑動的距離
  27. if(ifs){
  28. this.setData({//更新下面紅色距離左邊的距離,這里是滑動藍(lán)色部分然后設(shè)置下面滑動的距離,所以要用setData進(jìn)行渲染
  29. title_x:move
  30. });
  31. }
  32. },
  33. onLoad: function (options) {
  34.  
  35. }
  36.  
  37. })

在開發(fā)者工具上前幾次滑動會很慢,估計幾秒后另一個才會滑動,手機(jī)上不會。  在手機(jī)和開發(fā)者工具上滑動的時候有大概幾百毫秒延遲,可以忽略不計,  我覺得是因為兩個地方的滑動都要頻繁的使用setData操作,所以會出現(xiàn)這些情況。  如果大家發(fā)現(xiàn)是其他原因引起的、有錯誤或有其他好的方法,請留言,謝謝



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24257.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢