微信小程序商城项目之侧栏分类效果(1)
在商场项目中,一般都会有分类页面。 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 布局分析:<左盒子>左盒子> <右盒子>右盒子> 主盒子> 左盒子使用标准流 右盒子使用绝对定位(top、right) wxml: wxss: /左侧栏主盒子/
.nav_left{ /设置行内块级元素(没使用定位)/ display: inline-block; width: 25%; height: 100%; /主盒子设置背景色为灰色/ background: #f5f5f5; text-align: center; } /左侧栏list的item/ .nav_left .nav_left_items{ /每个高30px/ height: 30px; /垂直居中/ line-height: 30px; /再设上下padding增加高度,总高42px/ padding: 6px 0; /只设下边线/ border-bottom: 1px solid #dedede; /文字14px/ font-size: 14px; } /左侧栏list的item被选中时/ .nav_left .nav_left_items.active{ /背景色变成白色/ background: #fff; } /右侧栏主盒子/ js: })
demo地址: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |