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


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 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python写入文件自动换行问题的方法
2019/07/05 Python
python+django+rest框架配置创建方法
2019/08/31 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
互动出版网:专业书籍
2017/03/21 全球购物
企业总经理岗位职责
2014/02/13 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
邀请函格式范文
2015/02/02 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
节约用电通知
2015/04/25 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python