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


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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
php 修改密码实现代码
May 24 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 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
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
微信红包随机生成算法php版
2016/07/21 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Python Property属性的2种用法
2015/06/21 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python机器人行走步数问题的解决
2018/01/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python 如何创建一个线程池
2020/07/28 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
社区庆八一活动方案
2014/02/02 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
2014年人事科工作总结
2014/11/19 职场文书
大学同学聚会感言
2015/07/30 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android