微信小程序實現左右聯動

Posted on by

本文實例為大傢分享瞭微信小程序實現左右聯動的具體代碼，供大傢參考，具體內容如下

最近學校課程系統分析項目使用瞭微信小程序來進行搭建，在選擇瞭點餐項目後，對主頁進行實現時，想要實現像麥當勞點餐一樣，左邊表示類別，右邊表示菜品，通過點擊左邊的類，右邊會滾動到對應的類，滾動右邊的菜品，左邊當前滾動到的菜品類別也回高亮顯示。那麼首先先展示一下成果吧！

雖然這個功能很小，但我覺得一旦搞清楚scroll-view的原理就很有用處。

首先查看微信小程序的官方文檔：scroll-view

下面來按照我自己的理解介紹我所使用到的屬性：

  • scroll-y: 設置滾動的方向，x就是橫著，y就是豎著，屬性的類型是boolean值
  • scroll-top:就是說scroll-top的值是距離頂部的值，你將它寫在哪個scroll-view中，scroll-view就距離頂部多遠，不過我們可以設置變量值，在js中按照條件更改它，這也是實現左右聯動的關鍵步驟。
  • scroll-into-view: scrol-into-view就是一個id值，我們實現左右聯動是豎直方向上的滾動，所以設置scroll-into-view就是說當前scroll-into-view的值是多少，那麼當前所在的scroll-view就會滾動到哪個id。
  • style=‘height：這裡輸入高度’，你設置的要滾動的組件必須有個高度，否則就不會進行滾動，這也很好理解，你不設置一下他框的高度，那scroll-view也不知道從哪裡開始滑呀是不是。有時候需要在頁面中央（隻占部分高度）設置一個滑塊，有時候需要在整個窗口高度設置，所以高度也是必須的一個屬性。
  • scroll-with-animation：是在設置滾動條位置進行動畫過渡，我發現刪除該屬性也可以正常使用，可能在我寫的頁面暫時沒有使用到吧，之後還需在進行瞭解
  • bindscroll：綁定一個函數，由於是滾動，沒有點擊觸發，故有一個綁定的函數，用於在滑動時執行函數內容
  • 好的既然搞清楚組件的屬性，那麼我們開始實現吧，我的思路是左右各設置一個滑塊，兩邊都可以滑，先實現左邊聯動右邊，左邊的功能是點擊類右邊就可以進行跳轉
<scroll-view class='aside' scroll-y='true' style='height:{{asideheight}}px' scroll-with-animation="true" scroll-top='{{itemLeftToTop}}'  >
    
    <view  wx:for="{{menus}}" wx:key="id"  data-id="{{item.id}}" bindtap='tabMenu' class="{{item.id === currentLeftSelected ? 'menu active' : 'menu'}}">

    <view id="{{item.id}}">{{item.name}}</view>
    </view>

    <view class="option" >
    <button id='user_btn' bindtap='getin' >個</button>
    <image id='user_img' src='../../images/index/user_option.png'></image>
    </view>
    
  </scroll-view>
  <!--每一類菜品的具體信息，可進行按鈕添加每個菜品的數量-->
  
  <scroll-view class="item-content" scroll-y='true' scroll-into-view="{{itemScrollId}}" scroll-with-animation='true' style='height:{{asideheight}}px'  bindscroll="right" >
    <view wx:for="{{menus}}" wx:for-index="parentIndex" wx:key="id" id="{{item.id}}" >
    <view class="item_title">{{item.name}}</view>
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{item.categroy}}" wx:key="categroyid" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>
        <image  src="{{item.url}}"></image>
        <text class="title">{{item.categroy_name}}</text>
        <text class="price">￥ {{item.price}} 元</text>
        <view class="opera">
          <text class="btn_price " bindtap='del' data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index='{{index}}'>-</text>
          <text class="num">{{item.num}}</text>
          <text class="btn_price" bindtap="add" data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index="{{index}}">+</text>
        </view>    
      </view>
    </view>
    
    </view>
</scroll-view>

可以看到高度我是引用瞭一個變量，其在js中的實現如下：

wx.getSystemInfo({
      success: function (res) {
        var asideheight = res.windowHeight
        var asideheight1=0;
        that.setData({
          asideheight: asideheight,
          asideheight1:asideheight+80
        })
      },
      fail: () => { console.log("無法獲取顯示器高度，請檢查網絡連接") }
    });

並且在函數開頭設置好左右每一小格的高度

const RIGHT_BAR_HEIGHT = 41;
// 右側每個子類的高度（固定）
const RIGHT_ITEM_HEIGHT = 122;
// 左側每個類的高度（固定）
const LEFT_ITEM_HEIGHT = 41;

左邊的實現較為簡單，設置兩個個data，currentLeftSelected和itemScrollId當前點擊的類的ID值賦給這兩個，前者實現點擊時左邊類被選定的狀態，而右邊的值賦給 itemScrollId，然後再將這個值賦給前端右半邊scroll-view的scroll-into-view，從而實現左邊點擊右邊也跳轉。

tabMenu: function (e) {
    this.setData({
      currentLeftSelected: e.target.id || e.target.dataset.id,
      itemScrollId: e.target.id || e.target.dataset.id 
    });
    console.log(e);
  },

右半邊的思路就是你需要算出右邊每一個菜品距離頂部的高度，保存至一個數組裡，然後滑動時獲取當前滑動的高度，然後在bindscroll裡綁定的函數裡進行比較，對應的是哪個高度的范圍就設置左邊的currentLeftSelected為那個類的id。

get_eachItemToTop: function () {
    var obj = {};
    var totop = 0;
    var menus_ex = {};
    var that = this;
    menus_ex= that.data.menus;
    console.log(menus_ex);
    for(let i=1;i<menus_ex.length;i++){
      totop += (RIGHT_BAR_HEIGHT + menus_ex[i - 1].categroy.length * RIGHT_ITEM_HEIGHT);
      obj[menus_ex[i] ? menus_ex[i].id : 'last'] = totop;  
    }
    return obj;
  },
  
  right: function (e) {
      for (let i = 0; i < this.data.menus.length; i++) {
       let left = this.data.eachrightScrollToTop[this.data.menus[i].id]
       let right = this.data.eachrightScrollToTop[this.data.menus[i + 1] ? this.data.menus[i + 1].id : 'last']
       if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
       this.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }
   
    },

這樣左右聯動就基本實現瞭。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：