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


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了微信小程序侧边栏分类展示的具体代码,供大家参考,具体内容如下

效果图

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

实现思路

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

源码

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>
  </block>
 </view>

 <!--右侧栏-->
 <view class="nav_right">
  <view class="nav_right_items">
   <block wx:for="{{content}}" wx:for-item="item" wx:key="{{index}}">
    <view>
     <text>{{item.name}}</text>
    </view>
   </block>
  </view>
 </view>
</view>

index.wxss

page {
 background: #f5f5f5;
}

/*总体主盒子*/

.container {
 display: flex;
 direction: row;
}

/*左侧栏主盒子*/

.nav_left {
 /*设置行内块级元素(没使用定位)*/
 position: absolute;
 display: inline-block;
 width: 35%;
 height: 100%;
 /*主盒子设置背景色为灰色*/
 background: #f5f5f5;
 text-align: center;
 overflow: scroll;
}

/*左侧栏list的item*/

.nav_left .nav_left_items {
 /*每个高30px*/
 height: 30px;
 /*垂直居中*/
 line-height: 30px;
 /*再设上下padding增加高度,总高42px*/
 padding: 6px 0;
 /*只设下边线*/
 border-bottom: 1px solid #dedede;
 /*文字14px*/
 font-size: 20px;
}

/*左侧栏list的item被选中时*/

.nav_left .nav_left_items.active {
 /*背景色变成白色*/
 background: #fff;
 color: red;
}

/*右侧栏主盒子*/

.nav_right {
 /*右侧盒子使用了绝对定位*/
 position: absolute;
 top: 0;
 right: 0;
 flex: 1;
 /*宽度75%,高度占满,并使用百分比布局*/
 width: 65%;
 height: 100%;
 padding: 10px;
 box-sizing: border-box;
 background: #fff;
 overflow: scroll;
}

.nav_right .nav_right_items {
}

.nav_right .nav_right_items text {
 /*给text设成块级元素*/
 display: block;
 margin-bottom: 25px;
 font-size: 20px;
 /*设置文字居中*/
 text-align: left;
 /*设置文字溢出部分为...*/
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

index.js

Page({
 data: {
  curNav: 0,
  title:[
   {
    "id":0,
    "name":"技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },

   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   },
   {
    "id": 1,
    "name": "技术"
   }
  ],
  content:[
   {
    id:2,
    "name":"软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   },
   {
    id: 2,
    "name": "软件工程师"
   }
  ]
 }
})

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
微信小程序中weui用法解析
Oct 21 #Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 #Javascript
小程序实现日历左右滑动效果
Oct 21 #Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 #Javascript
小程序实现横向滑动日历效果
Oct 21 #Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
You might like
php 时间计算问题小结
2009/01/04 PHP
php数字游戏 计算24算法
2012/06/10 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
Seajs的学习笔记
2014/03/04 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
Python六大开源框架对比
2015/10/19 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
python3跳出一个循环的实例操作
2020/08/18 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
汽车检测与维修个人求职信
2013/09/24 职场文书
工作自我评价分享
2013/12/01 职场文书
教学改革实施方案
2014/03/31 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
运动会加油稿100字
2014/09/19 职场文书
步步惊心观后感
2015/06/12 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书