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

最新推荐文章于 2024-11-27 09:49:42 发布

程序东

最新推荐文章于 2024-11-27 09:49:42 发布

阅读量1.2w

点赞数 9

分类专栏：微信小程序

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

版权

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

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

效果图

在这里插入图片描述

实现思路

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

源码

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 =&