微信小程序之侧边栏分类实现

最新推荐文章于 2025-06-11 13:36:27 发布

程序东

最新推荐文章于 2025-06-11 13:36:27 发布

阅读量1.2w

点赞数 9

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weidong_y/article/details/89462578

本文介绍了如何在微信小程序中实现侧边栏分类功能。通过将屏幕视作固定盒子并将其分为两部分，使得每一侧都能独立滚动。提供了index.wxml、index.wxss和index.js的源码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

实现思路

把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动。

源码

index.wxml

<!--主盒子-->
<view class="container">
    <!--左侧栏-->
    <view class="nav_left">
        <block wx:for="{
  
  {title}}" wx:for-item="item" wx:key="{
  
  {index}}">
            <!--  {
  
  {curNav == item.id ? 'active' : ''}} -->
            <!-- 三目运算符是用来给当前选中的目录修改样式用的 -->
            <!-- switchRightTab 函数是用来实现数据的渲染 -->
            <!-- 当用户点击道不同的侧边栏目录时候，根据 data-id 去从数据库获取新的数据，渲染到左侧，并且修改 curNav 的值，使新样式添加到点击的目录上，具体 js 自己实现 -->
            <view class="nav_left_items {
  
  {curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-id="{
  
  {item.id}}">{
  
  {item.name}}</view>