微信小程序分类垂直导航

本文由清尘发表于2019-03-05 14:11最后修改于2020-01-10属于移动前端分类

效果图:

TIM截图20200110145312

verticalnav.wxml


<view class="VerticalBox">
  <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:100vh">
    <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{list}}" wx:key bindtap='tabSelect' data-id="{{index}}">
      Tab-{{item.name}}
    </view>
  </scroll-view>
  <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:100vh" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain">
    <view class="padding-top padding-lr" wx:for="{{list}}" wx:key id="main-{{index}}">
      <view class='cu-bar solid-bottom bg-white'>
        <view class='action'>
          <text class='icon-title text-green'></text> Tab-{{item.name}} </view>
      </view>
      <view class="cu-list menu-avatar">
        小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。

本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容,帮助开发者快速全面的了解小程序开发的方方面面。

想要更具体了关于框架、组件、API的详细内容,请参考对应的参考文档:
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。

本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容,帮助开发者快速全面的了解小程序开发的方方面面。

想要更具体了关于框架、组件、API的详细内容,请参考对应的参考文档:

      </view>

    </view>
  </scroll-view>
</view>

verticalnav.wxss

/* pages/component/nav/nav.wxss */
.VerticalNav.nav {
  width: 200rpx;
  white-space: initial;
}

.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;
}
.VerticalBox .cu-bar{background-color: red;}

verticalnav.js

const app = getApp()
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom,
    TabCur: 0,
    MainCur: 0,
    VerticalNavTop: 0,
    list: [],
    load: true
  },
  onLoad() {
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    let list = [{}];
    for (let i = 0; i < 26; i++) {
      list[i] = {};
      list[i].name = String.fromCharCode(65 + i);
      list[i].id = i;
    }
    this.setData({
      list: list,
      listCur: list[0]
    })
  },
  onReady() {
    wx.hideLoading()
  },
  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
      }
    }
  }
})

verticalnav.json

{
  "usingComponents": {}
}