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


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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
JS input 数字验证代码
Jul 30 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
数控技术专业推荐信
2013/11/01 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
代办委托书怎样写
2014/04/08 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
python scrapy简单模拟登录的代码分析
2021/07/21 Python