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


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 利用className得到对象的实现代码
Nov 15 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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命名空间(namespace)的使用基础及示例
2014/08/18 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
Python函数学习笔记
2008/10/07 Python
python判断端口是否打开的实现代码
2013/02/10 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
谈谈python中GUI的选择
2018/03/01 Python
Python多继承原理与用法示例
2018/08/23 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
十八大报告观后感
2014/01/28 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
大二学生自我检讨书
2014/10/23 职场文书
实习单位证明范例
2014/11/17 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书