快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)左右聯(lián)動

更新時間：2021年09月24日 10:58:04 作者：DonJiger

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)左右聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

最近學(xué)校課程系統(tǒng)分析項目使用了微信小程序來進(jìn)行搭建，在選擇了點(diǎn)餐項目后，對主頁進(jìn)行實現(xiàn)時，想要實現(xiàn)像麥當(dāng)勞點(diǎn)餐一樣，左邊表示類別，右邊表示菜品，通過點(diǎn)擊左邊的類，右邊會滾動到對應(yīng)的類，滾動右邊的菜品，左邊當(dāng)前滾動到的菜品類別也回高亮顯示。那么首先先展示一下成果吧！

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

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

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

scroll-y: 設(shè)置滾動的方向，x就是橫著，y就是豎著，屬性的類型是boolean值
scroll-top:就是說scroll-top的值是距離頂部的值，你將它寫在哪個scroll-view中，scroll-view就距離頂部多遠(yuǎn)，不過我們可以設(shè)置變量值，在js中按照條件更改它，這也是實現(xiàn)左右聯(lián)動的關(guān)鍵步驟。
scroll-into-view: scrol-into-view就是一個id值，我們實現(xiàn)左右聯(lián)動是豎直方向上的滾動，所以設(shè)置scroll-into-view就是說當(dāng)前scroll-into-view的值是多少，那么當(dāng)前所在的scroll-view就會滾動到哪個id。
style=‘height：這里輸入高度'，你設(shè)置的要滾動的組件必須有個高度，否則就不會進(jìn)行滾動，這也很好理解，你不設(shè)置一下他框的高度，那scroll-view也不知道從哪里開始滑呀是不是。有時候需要在頁面中央（只占部分高度）設(shè)置一個滑塊，有時候需要在整個窗口高度設(shè)置，所以高度也是必須的一個屬性。
scroll-with-animation：是在設(shè)置滾動條位置進(jìn)行動畫過渡，我發(fā)現(xiàn)刪除該屬性也可以正常使用，可能在我寫的頁面暫時沒有使用到吧，之后還需在進(jìn)行了解
bindscroll：綁定一個函數(shù)，由于是滾動，沒有點(diǎn)擊觸發(fā)，故有一個綁定的函數(shù)，用于在滑動時執(zhí)行函數(shù)內(nèi)容
好的既然搞清楚組件的屬性，那么我們開始實現(xiàn)吧，我的思路是左右各設(shè)置一個滑塊，兩邊都可以滑，先實現(xiàn)左邊聯(lián)動右邊，左邊的功能是點(diǎn)擊類右邊就可以進(jìn)行跳轉(zhuǎn)

<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>
  <!--每一類菜品的具體信息，可進(jìn)行按鈕添加每個菜品的數(shù)量-->
  
  <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中的實現(xiàn)如下：

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

并且在函數(shù)開頭設(shè)置好左右每一小格的高度

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

左邊的實現(xiàn)較為簡單，設(shè)置兩個個data，currentLeftSelected和itemScrollId當(dāng)前點(diǎn)擊的類的ID值賦給這兩個，前者實現(xiàn)點(diǎn)擊時左邊類被選定的狀態(tài)，而右邊的值賦給 itemScrollId，然后再將這個值賦給前端右半邊scroll-view的scroll-into-view，從而實現(xiàn)左邊點(diǎn)擊右邊也跳轉(zhuǎn)。

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

右半邊的思路就是你需要算出右邊每一個菜品距離頂部的高度，保存至一個數(shù)組里，然后滑動時獲取當(dāng)前滑動的高度，然后在bindscroll里綁定的函數(shù)里進(jìn)行比較，對應(yīng)的是哪個高度的范圍就設(shè)置左邊的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
            })
          }
        }
   
    },

這樣左右聯(lián)動就基本實現(xiàn)了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: