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


Posted in Javascript onOctober 21, 2019

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

效果图

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

布局分析

分成三个盒子:
主盒子,左盒子,右盒子

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

?wxml?

<!--主盒子-->
<view class="container">
 <!-- 左侧栏 -->
 <view class='nav_left'>
 <view class="nav_left_items {{curNav == 1 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="1">
 水果
 </view>
 <view class="nav_left_items {{curNav == 2 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="2">
 干果
 </view>
 <view class="nav_left_items {{curNav == 3 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="3">
 蔬菜
 </view>
 <view class="nav_left_items {{curNav == 4 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="4">
 海鲜
 </view>
 </view>
 <!-- 右侧栏 -->
 <view class="nav_right">
 <view wx:if="{{curNav==1}}">
 <view class="nav_right_items">
 <image src="../images/mihoutao.png"></image>
 <text>猕猴桃</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/longyan.png"></image>
 <text>龙眼</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/juzi.png"></image>
 <text>橘子</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/huolongguo.png"></image>
 <text>火龙果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/caomei.png"></image>
 <text>草莓</text>
 </view>
 </view>
 <view wx:if="{{curNav==2}}">
 <view class="nav_right_items">
 <image src="../images/xiaweiyi.png"></image>
 <text>夏威夷果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/kaixin.png"></image>
 <text>开心果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/bigen.png"></image>
 <text>碧根果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/mangguo.png"></image>
 <text>芒果</text>
 </view>
 </view>
 <view wx:if="{{curNav==3}}">
 <view class="nav_right_items">
 <image src="../images/huaye.png"></image>
 <text>花椰菜</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/shengcai.png"></image>
 <text>生菜</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/fanqie.png"></image>
 <text>番茄</text>
 </view>
 </view>
 </view>
</view>

?js?

// pages/stock/stock_main.js
Page({

 /* 页面的初始数据 */
 data: {
 curNav:1
 },
 /* 把点击到的某一项 设为当前curNav */
 switchRightTab:function(e){
 let id = e.target.dataset.id;
 console.log(id);
 this.setData({
 curNav: id
 })
 }
})

?wxss?

/* 1. 设置整个页面的背景颜色 */
page{ 
 background: #f5f5f5; 
 /* 避免左侧Item不够时 被白色覆盖*/
} 
/* 2.主盒子 */ 
.container { 
 width: 100%; /* 宽度占屏幕的100% */
 height: 100%; /* 高度占屏幕的100% */
 background-color: #fff; /* 背景颜色 */
}
/* 3.左盒子*/ 
 /* 3.1. 左侧栏主盒子总体设置 */ 
.nav_left{ 
 position:absolute; /* 使用绝对定位 */
 top:0px; /* 距离上边距:0px */
 left:0px; /* 距离左边距:0px */
 width: 25%; /* 每个item所占的宽度 */
 background: #f5f5f5; /* 主盒子设置背景色为灰色 */ 
 text-align: center; /* 文字居中显示 */
}
/* 3.2. 左侧栏的每个item */ 
.nav_left .nav_left_items{ 
 height: 40px; /* 每个item高40px*/ 
 padding: 6px 0; /* 上内边距和下内边距是 6px[增加高度] 右内边距和左内边距是 0px*/
 border-bottom: 1px solid #dedede; /* 设置下边线 */ 
 font-size: 14px; /* 设置文字大小:14px */ 
} 
/* 3.3. 左侧栏list的item被选中时*/ 
.nav_left .nav_left_items.active{ 
 background: #fff; /* 背景色变成白色 */ 
 color: #3385ff; /* 字体编程蓝色 */
 border-left: 3px solid #3385ff; /* 设置边框的宽度以及颜色 */
}
/* 4.右盒子 */ 
/* 4.1. 右侧栏主盒子总体设置 */ 
.nav_right{ 
 position: absolute; /* 使用绝对定位 */ 
 top: 0; /* 距离上边距:0px */
 left: 80px; /* 距离左边距:80px */
 width: 75%; /* 右侧主盒子所占宽度 */
 height: 600px; /* 右侧主盒子所占高度 */
 padding: 10px; /* 所有 4 个内边距都是 10px*/
 box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
 background: #fff; /* 右侧主盒子背景颜色 */
}
/* 4.2. 右侧栏中的每个item */ 
.nav_right .nav_right_items{ 
 float: left; /* 浮动向左 */ 
 width: 33.33%; /* 每个item设置宽度是33.33% */ 
 height: 120px; /* 每个item设置高度是120px */ 
 text-align: center; /* 设置图片下方的提示文字居中显示 */
} 
/* 4.3. 右侧栏中的每个item的图样式设置 */ 
.nav_right .nav_right_items image{ 
 width: 60px; /* 给图片设置宽度 */ 
 height: 60px; /* 给图片设置高度 */ 
 margin-top: 15px; /* 图片距离上边距15px */ 
 border-radius: 40%; /* 给图片添加圆角边框 */
}

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

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

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

Javascript 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
微信小程序实现侧边栏分类
Oct 21 #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
You might like
新闻分类录入、显示系统
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue实现扫码功能
2020/01/17 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
vscode 远程调试python的方法
2017/12/01 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python如何输出警告信息
2020/07/30 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
游戏商店:Eneba
2020/04/25 全球购物
禁止酒驾标语
2014/06/25 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL