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


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 相关文章推荐
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
React 组件间的通信示例
Jun 14 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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的安全
2006/10/09 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js单例模式详解实例
2013/11/21 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
android面试问题与答案
2016/12/27 面试题
中专生自荐信
2013/10/12 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
会计工作态度自我评价
2015/03/06 职场文书
公司辞职信模板
2015/05/13 职场文书
运动会入场词
2015/07/18 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis