小程序侧边栏切换

最新推荐文章于 2024-08-16 08:13:55 发布

今天星期八

最新推荐文章于 2024-08-16 08:13:55 发布

阅读量2.7k

点赞数 5

分类专栏：小程序

本文链接：https://blog.csdn.net/Missbelover/article/details/92636264

版权

本文介绍了小程序中侧边栏切换的实现过程，包括sort.wxml、sort.wxss和sort.js的相关代码配置，最终通过运行展示效果。

摘要由CSDN通过智能技术生成

效果图如下：

实现步骤：

sort.wxml

<!--主盒子-->
<view class="con">
 <!--左侧栏-->
 <view class="nav_left">
   <block wx:for="{
   {cateItems}}" wx:key="*this">
     <!--当前项的id等于item项的id，那个就是当前状态-->
     <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
     <view class="nav_left_items {
   {curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{
   {index}}" data-id="{
   {item.cate_id}}">{
   {
   item.cate_name}}</view>
   </block>
 </view>
 <!--右侧栏-->
 <view class="nav_right">
   <!--如果有数据，才遍历项-->
   <view wx:if="{
   {cateItems[curIndex].ishaveChild}}">
     <block wx:for="{
   {cateItems[curIndex].children}}" wx:key="value">
       <view class="nav_right_items">
       <!--界面跳转 -->
         <navigator url="../../detail/detail">
           <image src="{
   {item.image}}"></image>
           <text>{
   {
   item.name