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


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 相关文章推荐
js 用CreateElement动态创建标签示例
Nov 20 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
Node.js插件安装图文教程
May 06 Javascript
javascript基础知识
Jun 07 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
微信小程序中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 EOT定界符的使用详解
2008/09/30 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
ext 代码生成器
2009/08/07 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
软件测试题目
2013/02/27 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
安全横幅标语
2014/06/09 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
法制教育演讲稿
2014/09/10 职场文书
群众路线个人整改方案
2014/10/25 职场文书
沈阳故宫导游词
2015/01/31 职场文书
大学军训口号大全
2015/12/24 职场文书
高中地理教学反思
2016/02/19 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
MySQL分区以及建索引的方法总结
2022/04/13 MySQL