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


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 AJAX 框架的使用方法
Nov 03 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
js实现两点之间画线的方法
May 12 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
node.js中的console用法总结
2014/12/15 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Python切片用法实例教程
2014/09/08 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
公立医院改革实施方案
2014/03/14 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
小学校本教研总结
2015/08/13 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python