效果
点击导航栏标题跳转到相应的主题内容下。
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
})
},
})