微信小程序开发--3.4导航栏跳转

效果

点击导航栏标题跳转到相应的主题内容下。

wxml

<view class="VerticalBox">
  <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{
   
   {VerticalNavTop}}" style="height:calc(100vh - 375rpx);background-color:#FCFAFA;">
    <view class="cu-item {
   
   {index==TabCur?'text-green cur':''}}" wx:for="{
   
   {categoryList}}" wx:key="id" bindtap='tabSelect' data-id="{
   
   {index}}" style="font-size:24rpx;line-height: 102rpx;text-align:center;">{
   
   {item.text}}
    </view>
  </scroll-view>
  <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx);padding-top:24rpx;background-color:#FCFAFA;" scroll-into-view="main-{
   
   {MainCur}}" bindscroll="VerticalMain">
        <view wx:for="{
   
   {categoryList}}" wx:key="id" id="main-{
   
   {index}}" wx:for-index="index" wx:for-item="categoryItem">
        <view class='main-Title' style="height:60rpx;">
            <view style="color:#93a0e6;font-size:24rpx;font-weight:bolder;">{
   
   {categoryItem.text}}</view>
        </view>
        <view class="cu-list menu-avatar">
            <view>
                <block wx:for="{
   
   {ShopGoodsList}}" wx:key="GoodsIndex"  wx:for-index="goodsIndex" wx:for-item="item">
                    <!-- wx:if 判断是否 为该分类 -->
                    <block wx:if="{
   
   {categoryItem.text==item.goodInfo.goodsType}}">  
                    //主体内容 
                    </block>
                </block>
            </view>
        </view>
        </view>
  </scroll-view>
</view>

wxss

.VerticalNav.nav {
  width: 186rpx;
  white-space: initial; 

}

.VerticalNav.nav .cu-item {
  width: 100%;
  line-height: 102rpx;
  text-align: center;
  background-color: #f1f0f6;
  margin: 0;
  border: none;
  height: 102rpx;
  position: relative; 
  color:#818bd0
}

.VerticalNav.nav .cu-item.cur {
  background-color:#FCFAFA;
  border-left: 3rpx;
} 

.VerticalNav.nav .cu-item.cur::before {
  content: "";
  width: 6rpx;
  height:102rpx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  left: 0rpx;
  bottom: 0;
  margin: auto;
}
.VerticalBox{
  display: flex;
}
.VerticalMain{
  background-color: #f1f1f1;
}

.VerticalMain.cu-list .cu-item{
    height: 300rpx;
}

.main-Title {
  display: flex;
  position: relative;
  min-height: 52rpx;
  justify-content: space-between;
  padding-left:22rpx;
}

js

const app = getApp()
Page({
  data: {
    TabCur: 0,
    MainCur: 0,
    VerticalNavTop: 0,
    categoryList :[   
        {
            id: 0 ,
            text:"特惠项目" 
        },   
        {
            id: 1 , 
            text:  "清洁美白"
         } ,

         {
            id: 2, 
            text:  "常规项目"
         } , 

         {
            id: 3, 
            text: "口腔外科" ,         
         } , 
         {
            id: 4, 
            text: "儿童齿科" ,         
         } , 
         {
            id: 5, 
            text:  "种植牙" ,                       

        }   ,
        {
            id:   6, 
            text:  "正畸矫正" ,                        

         }   ,
         { 
             id:   7, 
            text:  "美学修复" ,                    

         } 
      ], 
  },
  onLoad() {
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
  },

  onReady() {
    wx.hideLoading() 
  }, 

  onShow: function () { 
    this.setData({
        TabCur: wx.getStorageSync('serviceShopTabCur'),
        MainCur: wx.getStorageSync('serviceShopTabCur'),
        VerticalNavTop: (wx.getStorageSync('serviceShopTabCur') - 1) * 50
    })
  }, 

  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      MainCur: e.currentTarget.dataset.id,
      VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
    })
  },

})