快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)菜單

更新時(shí)間：2021年09月24日 11:35:06 作者：xiaobai_Ry

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

最近為了實(shí)現(xiàn)課程設(shè)計(jì)，也做了一些前端的東西，今天想要做一個(gè)聯(lián)動(dòng)菜單來實(shí)現(xiàn)一些功能。實(shí)現(xiàn)了，也來做做筆記。

第1步：了解一下

左右側(cè)菜單其實(shí)簡單來講就是把一個(gè)區(qū)域分成左右兩個(gè)部分。關(guān)于組件，我覺得可以直接去微信開發(fā)文檔看。通過代碼，我覺得應(yīng)該是可以理解的。話步多講，直接上代碼。（首先說明一點(diǎn)的是，我還是個(gè)剛剛接觸前端的小白，可能有些寫得不太好得，往各位博友多多指出改進(jìn)得建議，相互學(xué)習(xí)）

第2步：先看一下效果啦

運(yùn)行效率還是可以的很快，無卡頓現(xiàn)象。

第3步：實(shí)現(xiàn)（代碼）

這里我只放了其中一部分，也是可以直接實(shí)現(xiàn)的，沒有問題，可以根據(jù)自己的需要修改。

wxml

<!-- 左側(cè)滾動(dòng)欄 -->
<view class ='total'>
<view class='under_line'></view>
<view style='float: left' class='left'>
  <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
    <view class='all clear'>
      <block wx:key="lists" wx:for="{{lists}}">
        <view bindtap='jumpIndex' data-menuindex='{{index}}'>
          <view class='text-style'>
            <text class="{{indexId==index?'active1':''}}">{{item}}</text>
            <text class="{{indexId==index?'active':''}}"></text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

<!--右側(cè)欄-->
<view class="right">
    <!--判斷indexId值顯示不同頁面-->
     <view wx:if="{{indexId==0}}">
        <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='all clear'>
        <block wx:key="lists_r0" wx:for="{{lists_r0}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <view class='text-style2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </view>
        </view>
        </block>
        </view>
        </scroll-view>
      </view>

      <view wx:if="{{indexId==1}}">
      <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='all clear'>
        <block wx:key="lists_r1" wx:for="{{lists_r1}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <view class='text-style2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </view>
        </view>
        </block>
        </view>
        </scroll-view>
      </view>
      
     </view>
</view>

wxss

.under_line{
  width: 100%;
  border-top: 1rpx solid #efefef;
}

.left {
  border-top: 1rpx solid #efefef;
  border-right: 1rpx solid #efefef;
}
 
.text-style {
  width: 200rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}


 
.active3 {
  display: block;
  width: 500rpx;
  height: 6rpx;
  background: rgb(88, 123, 193);
  position: relative;
  left: 0rpx;
  bottom: 30rpx;
}

.active2 {
  color: rgb(88, 123, 193);
}
 
.active1 {
  color: #96C158;
}
 
.active {
  display: block;
  width: 50rpx;
  height: 6rpx;
  background: #96C158;
  position: relative;
  left: 75rpx;
  bottom: 30rpx;
}

.scrollY {
  width: 210rpx;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1rpx solid #efefef;
}

.right{
  border-top: 1rpx solid #efefef;
  border-left: 1rpx solid  rgba(0,0,0,0.0);
  margin-left: 2rpx;
}

.scrollY2 {
  width: 520rpx;
  position: fixed;
  right: 0;
  top: 0;
  border-left: 1rpx solid rgba(0,0,0,0);
  margin-left: 2rpx;
}

.text-style2 {
  width: 520rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: left;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}

.button_call{
  height: 90rpx;
  width: 90rpx;
  position: fixed;
  bottom: 150rpx;
  right: 13rpx;
  opacity: 0.7;
  z-index: 100;
}

js

Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    lists: [
      "主類1", "主類2", "主類3", "學(xué)生工作部", "黨委部門", "校工與教務(wù)", "離退休工作處", "保衛(wèi)處", "財(cái)務(wù)與審計(jì)", "實(shí)驗(yàn)室與設(shè)備", "人事處", "保衛(wèi)處", "學(xué)院", "直屬單位", "其他"
    ],
    lists_r0: [
      "主類1的子類1", 
      "主類1的子類2", "主類1的子類3", "主類1的子類4", "黨委部門", "校工與教務(wù)", "離退休工作處", "保衛(wèi)處", "財(cái)務(wù)與審計(jì)", "實(shí)驗(yàn)室與設(shè)備", "人事處", "保衛(wèi)處", "學(xué)院", "直屬單位", "其他"
    ],
    lists_r1: [
      "主類2的子類1", 
      "主類2的子類2", "主類2的子類3", "主類2的子類4", "黨委部門", "校工與教務(wù)", "離退休工作處", "保衛(wèi)處", "財(cái)務(wù)與審計(jì)", "實(shí)驗(yàn)室與設(shè)備", "人事處", "保衛(wèi)處", "學(xué)院", "直屬單位", "其他"
    ],
    indexId: 0,
    indexIdr0: 0,
    indexIdr0: 1,
  },
  // 左側(cè)點(diǎn)擊事件
  jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexId: index
    });
  },

  jumpIndexR0(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexIdr0: index
    });
  },


  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winHeight: res.windowHeight
        });
      }
    });
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function() {
 
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

json

{
  "usingComponents": { },
  "navigationBarBackgroundColor":"自己想要的背景色",
  "navigationBarTitleText": "電話查詢",
  "navigationBarTextStyle":"black",
  "enablePullDownRefresh": true
}

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

您可能感興趣的文章: