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


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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
js闭包实例汇总
Nov 09 Javascript
详解javascript中的事件处理
Nov 06 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
微信小程序实现简单文字跑马灯
May 26 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
JQuery判断正整数整理小结
2017/08/21 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python3图片文件批量重命名处理
2019/10/31 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
python批量修改文件名的示例
2020/09/27 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
活动倡议书范文
2014/05/13 职场文书
本科应届生自荐信
2014/06/29 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
小学新课改心得体会
2016/01/22 职场文书
创业计划书之便利店
2019/09/05 职场文书
nginx lua 操作 mysql
2022/05/15 Servers