微信小程序选项卡功能开发步骤与方法全解析
452
2023-11-13
微信小程序实现下拉筛选功能
最近开发应项目需求实现一个类似与贝壳找房里面的下拉筛选功能，在这里分享给有同样需求的大家，互相学习学习
这是主要功能实现，我把它封装成了组件，在对应的地方使用，就可以实现贝壳找房相同的效果
好了，废话不多说，直接上代码吧
wxml:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--筛选栏-->
<view class="cxj-contents">
<view class="cxj-menu">
<view class="flex-view{{item.active? active:}}" wx:for="{{tabTxt}}" wx:key="" data-index="{{index}}"
bindtap="filterTab" wx:key="id">
<text class="flex_nav {{item.active? active:}}">{{item.text}}</text>
<icon class="iconfont {{item.active? iconshanglaxiala-:iconshanglaxiala-1}}" />
</view>
</view>
</view>
<!--条件选项栏-->
<view class="cxj-tab-layout" hidden="{{!item.active}}" wx:for="{{tabTxt}}"
wx:for-index="index1" wx:for-item="item" wx:key="id" >
<scroll-view scroll-y class="scroll" style="height: calc(100vh - {{navH+45}}px);">
<view class="cxj-tap-wrap">
<view>
<view wx:for="{{item.child}}" wx:for-item="item_child" wx:key="id" wx:for-index="index2">
<view class="title">{{item_child.title}}:</view>
<view class="cxj-tap-main">
<view class="navs {{item_childtype.selected==true?active:}}" wx:for="{{item_child.childType}}"
wx:for-item="item_childtype" wx:key="id" data-id="{{item_childtype.id}}" data-index="0"
data-txt="{{item_childtype.text}}" wx:for-index="index3">
<view bindtap="clickTabChild" data-index1="{{index1}}" data-index2="{{index2}}" data-index3="{{index3}}">{{item_childtype.text}}</view>
</view>
</view>
</view>
</view>
<view class="select_btn">
<button class="clear" bindtap="filterClears">清空条件</button>
<button class="submit" bindtap="filterSubmit">确定</button>
</view>
</view>
<!-- <view class="hidden" bindtap="closefilterTab"></view> -->
</scroll-view>
</view>
wxss:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
@import "../../style/iconfont.wxss";
/* 筛选栏 */
.cxj-contents{
position: sticky;
width: 100%;
height: 100rpx;
z-index: 1003;
/* box-shadow: 0px 15px 15px -15px rgba(200,200,200,0.6); */
overflow: hidden;
margin-top: -30rpx;
}
.cxj-menu {
background-color: #fff;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
font-size: 32rpx;
}
.cxj-menu .iconshanglaxiala-{
color: #FF6F00
}
.cxj-menu .iconshanglaxiala-1{
color: #333
}
.cxj-menu .flex_nav.active {color: #FF6F00;}
.flex-view {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
display: block;
text-align: center;
line-height: 100rpx;
}
.flex_nav{
font-size: 32rpx;
color: #333
}
.cxj-icon {
width: 24rpx;
height: 24rpx;
vertical-align: middle;
margin-left: 5px;
}
/* 筛选内容 */
.cxj-content {
width: 100%;
font-size: 28rpx;
z-index: 1009;
}
.cxj-content-li {
line-height: 60rpx;
text-align: center;
}
.cxj-tab-layout {
width: 100%;
overflow: hidden;
z-index: 1009;
/* height: 100%; */
/* padding-top: 20rpx; */
background-color: rgba(000,000,000,.5);
/* position: fixed; */
}
.hidden{
background-color: rgba(000,000,000,.5);
height: 100%;
z-index: 9999;
width: 100%;
}
.cxj-tab-layout .navs.active { background: #FFE5D9 !important;}
.cxj-tap-wrap{
padding: 0 30rpx;
background: #fff;
padding-bottom: 40rpx
}
.cxj-tap-main{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
box-sizing: border-box;
}
.title{
margin-bottom: 20rpx
}
.scroll{
/* height: calc(100vh - 110px); */
}
.cxj-tab-layout .navs {
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 32rpx;
font-weight: 300;
background: #F3F3F3;
border-radius: 6rpx;
color: #333333;
margin-bottom: 24rpx;
flex: 0 0 31%;
}
.cxj-tap-main:after {
content: "";
width:31%;
}
/* 按钮 */
.select_btn{
display: flex;
justify-content: space-between;
align-items: center;
}
.select_btn .clear{
width: 31%;
font-size: 30rpx;
font-weight: 300;
border: 1px solid #FF8751;
border-radius: 6rpx;
background-color: #fff;
color: #FF8751;
height: 88rpx;
line-height: 54rpx;
margin: 0;
}
.select_btn .submit{
width: 66%;
font-size: 30rpx;
font-weight: 300;
background-color: #FF8751;
color: #fff;
height: 88rpx;
line-height: 60rpx;
margin: 0;
}
js:
以上就是本文的全部内容，希望对大家的学习有所帮助
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~