小程序二级导航栏

最新推荐文章于 2024-08-04 10:22:25 发布

weixin_44908506

最新推荐文章于 2024-08-04 10:22:25 发布

阅读量4.3k

点赞数

文章标签：筛选栏

本文链接：https://blog.csdn.net/weixin_44908506/article/details/89373441

版权

本文介绍如何在小程序中实现二级导航栏，包括样式设置（wxml, wxss）和交互逻辑（js）。通过点击筛选项触发不同排序方式，如综合排序、距离排序和全部活动，并展示相应的数据列表。" 81028479,7840843,使用WindowBuilder在Eclipse中进行Java GUI开发,"['Java开发', 'GUI设计', 'Eclipse插件', 'JFrame应用', '可视化工具']

摘要由CSDN通过智能技术生成

筛选栏
wxml

在这里插入图片描述
wxss

.tabTit{
height:90rpx;
line-height: 90rpx;
border-bottom: solid 1px #eee;
/* position:fixed; /
/ top:0; */
width: 750rpx;
z-index: 1;
background: #fff;
font-size:15px;
text-align: center;
}
.tabTit .active{
color:#e64340;
}

.tabTit .active image{
transform: rotate(180deg);
background: none;
}

.tabTit image{
width:26rpx;
height:26rpx;
vertical-align: middle;
margin-left: 5px;

}

.tabLayer{
box-shadow: 0 5px 5px rgba(0,0,0,.15);
width:750rpx;
overflow: hidden;
position: fixed;
top:90rpx;
z-index: 1;
background: #fff;
padding-bottom: 40rpx;
border-bottom: solid 1px #eee;
text-align: center;
margin-top: 420rpx;
}
.tabLayer text{
width:210rpx;
height:60rpx;
line-height:60rpx;
float:left;
border: solid 1px #eee;
margin:20rpx 0 0 26rpx;
font-size:15px;
}
.tabLayer .active{
color:#e64340;
border-color:#e64340;
}
.flex1 {
flex: 1;
overflow: hidden;
disp