小程序菜单三级分类
页面显示效果
前端的美化功底还有得提高哈哈哈
前端代码
<view class='container'>
<!-- tab导航栏 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{categoryMenuI}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?'active':''}}" data-value='{{navItem.value}}' data-current="{{idx}}" bindtap="switchNav">
<text>{{navItem.label}}</text>
</view>
</block>
</scroll-view>
<!-- 页面内容 -->
<!-- 左边的 -->
<scroll-view class='nav_left' scroll-y='true'>
<block wx:for="{{categoryMenuILeft}}" wx:key="{{index}}">
<view style="background:#b9b9b9;" hover-class="hover-color" class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-value='{{item.value}}' data-index='{{index}}'>
{{item.label}}</view>
</block>
</scroll-view>
<!-- 右边的 -->
<scroll-view class="nav_right" scroll-y="true">
<view class="{{topx}}">
<block wx:for="{{categoryMenuIRight}}" wx:key="index">
<navigator url="/pages/classification/classification?categoryId={{item.value}}&categoryName={{item.label}}">
<view class="nav_right_items" data-index='{{index}}' data-value='{{item.value}}' bindtap="switchRightTab">
<image src="{{item.categoryImage}}"></image>
<text>{{item.label}}</text>
</view>
</navigator>
</block>
</view>
</scroll-view>
</view>