微信小程序如何實現點餐小程序左側滑動菜單

這篇文章主要講解了“微信小程序如何實現點餐小程序左側滑動菜單”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序如何實現點餐小程序左側滑動菜單”吧！

效果圖：

一、初識scroll-view

想要實現上述功能我們必須要借助微信為我們提供的scroll-view組件，沒有了解過的同學需要先去簡單閱讀下API。從圖中我們可以看出整個布局主要是由左右兩個滾動界面構成。但是它們彼此之間又有聯系，在點擊左側菜單類型跟滑動右側菜品的時候另外一個滾動窗口必須做出響應。滾動條實現原理其實就是我們HTML中的錨點，右側整個菜單是一個完整界面它會將其按唯一id標識拆分成不同模塊。比如我們整個界面的高度是2000rpx,其中人氣top10占400rpx。那么height：0-400就對應人氣top10。而無肉不歡對應模塊高度為300rpx那么，400-700區域就是無肉不歡。以此類推，下面代碼中我們使用id="{{ ‘right’ + item.id}}" 為每個分類模塊做了唯一標識。

<view>
  <view class="menuMain">
    <scroll-view scroll-y="true" class="menuLeft">
      <view wx:for="{{menuArr}}" wx:key="*this" bindtap="leftMenuClick" data-current_index="{{index}}" class="{{leftView == index ? 'active' : ''}}">{{item.name}}

      </view>
    </scroll-view>
    <scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="rightScroll" scroll-into-view="{{rightId}}"
     class="menuRight">
      <view  wx:for="{{menuArr}}" wx:key="*this" id="{{ 'right' + item.id}}" class="goods">
        <view class="goodsType">
         ---  {{item.name}} ---
        </view>
        <view wx:for="{{item.subArr}}" wx:key="*this" wx:for-item="goods" class="goodsContent">
          <view class="orderDishes">
            <image src="{{goods.imageUrl}}" ></image>
            <view class="goodsInfo">
              <view class="goodsInfo">{{goods.goodsName}}</view>
              <view class="goodsInfo">規格：{{goods.unit}}</view>
              <view class="goodsInfo goodsInfoPrice">￥{{goods.price}}</view>
              <view class="add">
                +
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>


</view>

二、左側導航

在小程序初始化生命周期函數onReady中我們需要提前獲取不同模塊的高度并存入數組中，來為我們后續跳轉提供高度信息。我們分段將所有的view對應高度都放入到heightArr 數組中。首先實現左側點擊導航右側滑動到對應高度需求，這里使用bindtap微信我們提供的綁定事件函數來控制右側的位置。這里我們為for循環參數index進行了重命名，通過自定義屬性data-傳遞給函數調用者。這里需要注意一個屬性scroll-into-view。值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素 其對應的view標識id就是當前右側滑動窗口要顯示的內容，所以我們需要將左側屬性與右側視圖id對應起來。在data中我們定義兩個字段leftView代表左側人氣top10，無肉不歡等分類導航。rightId對應scroll-view標簽下各個view的唯一id值。這里注意我們的id并不是直接對應，前面有right字段使用是需要進行組合。點擊左側控制右側滑動的功能并不需要用到高度數組，只需要使其與view中的id對應起來即可。詳細請看leftMenuClick函數。為了使動畫看起來比較流暢請加上scroll-with-animation屬性

let heightArr = [0]  // 存放高度累加數組
data: {
    rightId: 'right0',
    leftView: 0
  },
/**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    const query = wx.createSelectorQuery()
    query.selectAll('.goods').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      res[0].top // #the-id節點的上邊界坐標
      res[1].scrollTop // 顯示區域的豎直滾動位置
      res[0].map( val => {
        let result = val.height  + heightArr[heightArr.length - 1]
        console.log(result)
        // 拿后一個view盒子的高度加上前面的高度
        heightArr.push(result) 
      })
      console.log(heightArr)
    })
  
  },
/**
   * 左側菜單點擊事件,事件對象e傳輸index
   */
  leftMenuClick(e){
    console.log(e.currentTarget.dataset.current_index)
    this.setData({
      leftView: e.currentTarget.dataset.current_index,
      rightId: 'right' + e.currentTarget.dataset.current_index
    })
  },

  /**
   * 右側滾動事件
   */
  rightScroll(e) {
    let st = e.detail.scrollTop
    console.log('st' + e.detail.scrollTop)
    for(let i = 0; i < heightArr.length; i++){
      if(st >= heightArr[i] && st <= heightArr[i+1] - 5){
        this.setData({
          leftView: i,
        })
        console.log(this.data.leftView)
        return
      }
    }
  }

三、右側滑動

右側滑動控制左側菜單自動選擇就需要用到我們前面說到的滑動高度了，上面我們獲取到了每個view對應的高度分別存儲到了heightArr 數組中。數組中存放的每個數值對應的是我們view所在高度。e.detail.scrollTop獲取到的是頂部界面所屬高度，假設當前頂部高度為500我們知道400-700是屬于無肉不歡對應的界面。此時只需要判斷后將leftView修改為所對應的2即可。具體實現看rightScroll函數，我們遍歷循環heightArr中的高度數值判斷當前st屬于哪個階層，找到后將左側標識字段設置為對應值即可。其中我們 -5是為了使用戶體驗更友好避免出現分類標題已經劃過去了，左側導航還沒變更的情況。大體邏輯就是這樣，樣式根據自己需求來就可以。下面給出我實現界面對應的代碼，其中很多樣式都是偽代碼大家到時自信更改。

/* pages/order/order.wxss */

.link {
  height: 30px;
}

.mainMenu {
  width: 180rpx;
}

.menuMain {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* 左側菜單導航欄 */
.menuLeft {
  width: 20%;
}

.menuLeft view {
  font-size: 26rpx;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  background-color: rgb(238, 241, 241);
  position: relative;
}
.menuLeft view.active{
  background-color: rgb(255, 255, 255);
}

.menuLeft view::before {
  content: '';
  width: 6rpx;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color:transparent;
  border-left: none;
}

.menuLeft view.active::before {
  background-color: rgb(245, 229, 6);
}


.menuRight {
  height: 100vh;
  width: 75%;
}

.menuRight .goods{
  padding: 10rpx;
}

.menuRight .goodsType{
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  font-weight: 600;
  color: rgb(0, 0, 0);
}

.menuRight .goods .goodsContent .orderDishes image{
  width: 320rpx;
  height: 260rpx;
}


.menuRight .goods .goodsContent text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orderDishes{
  padding-top: 20rpx;
  display: flex;
  flex-direction: row;
}

.add{
  margin-left: 40rpx;
  margin-top: 10rpx;
  width: 120rpx;
  font-size: 40rpx;
  font-weight: 600;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: rgb(219, 80, 55);
  border-radius: 20rpx;
  color: rgb(255, 255, 255);
}

.goodsInfo{
  margin-left: 16rpx;
  height: 65rpx;
  font-size: 28rpx;
  font-weight: 800;
  color: rgb(0, 0, 0);
}


.goodsInfoPrice{
  color: rgb(247, 36, 36);
}

感謝各位的閱讀，以上就是“微信小程序如何實現點餐小程序左側滑動菜單”的內容了，經過本文的學習后，相信大家對微信小程序如何實現點餐小程序左側滑動菜單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！