小程序垂直导航的设计

小程序垂直导航的设计

1.看效果

2.代码

2.1 wxxml

<view class="VerticalBox">
//侧边导航栏
  <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(124vh - 375rpx)">
    <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{list1}}" wx:key bindtap='tabSelect' data-id="{{index}}">
      {{item.name}}
    </view>
  </scroll-view>
  //主题部分
  <scroll-view class="VerticalMain" scroll-y scroll-with-animation 
  style="height:calc(124vh - 375rpx)" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain">
    <view class="padding-top padding-lr">
     //写你的主体代码
    </view>
  </scroll-view>
</view>

2.2 wxss

.VerticalNav.nav {
  width: 200rpx;
  white-space: initial;
  height: 125vh;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
  content: "";
  width: 8rpx;
  height: 30rpx;
  border-radius: 10rpx 0 0 10rpx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0rpx;
  bottom: 0;
  margin: auto;
}
.VerticalBox{
  display: flex;
}
.VerticalMain{
  background-color: #f1f1f1;
}

2.3 js

//侧边导航栏下滑方法
 tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      MainCur: e.currentTarget.dataset.id,
      VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
    })
  },
  //右边主题滑动响应方法
  VerticalMain(e) {
    let that = this;
    let list = this.data.list;
    let tabHeight = 0;
    if (this.data.load) {
      for (let i = 0; i < list.length; i++) {
        let view = wx.createSelectorQuery().select("#main-" + list[i].id);
        view.fields({
          size: true
        }, data => {
          list[i].top = tabHeight;
          tabHeight = tabHeight + data.height;
          list[i].bottom = tabHeight;     
        }).exec();
      }
      that.setData({
        load: false,
        list: list
      })
    }
    let scrollTop = e.detail.scrollTop + 20;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        that.setData({
          VerticalNavTop: (list[i].id - 1) * 50,
          TabCur: list[i].id
        })
        return false
      }
    }
  },

3.data

记得点赞哦