需求
点击标签栏按钮,向下弹出菜单,再次点击,收回菜单
要解决的问题
标签栏三栏样式,标签栏固定不动;
点击标签栏弹出菜单,并且出现透明遮罩;
遮罩优先级在弹出框之下;
弹出框内标签的设置;
滚动栏滚动条的隐藏
如何解决?
弹性布局,横向,三者平分整栏;
状态监听点击事件,数据控制hide或者show,通过rgba设置透明度
弹出框设置z-index;
弹性布局flex 横向排列 超出后wrap 然后space-around控制间距
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
具体实现
wxml
<import src=../../templates/template /> <view class=container {{isMask?'mask':''}}> <view class=header> <view class=filterCity {{status=='1' && isActive?'active':''}} data-status='1' bindtap=changeStatus> <view class=city>城市筛选</view> <image src={{status=='1' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}} /> </view> <view class=filterJob {{status=='2' && isActive?'active':''}} data-status='2' bindtap=changeStatus> <view class=job>职位筛选</view> <image src={{status=='2' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}} /> </view> <view class=filterOrder {{status=='3'&& isActive?'active':''}} data-status='3' bindtap=changeStatus> <view class=order>排序方式</view> <image src={{status=='3' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}} /> </view> </view> <block wx:if={{isActive==true&&status=='1'}}> <view class=cityContainer> <block wx:for={{city}} wx:key=id wx:for-index=index> <view class=city {{isSelect&&index==curIndex?'select':''}} data-index={{index}} bindtap=select>{{item}}</view> </block> </view> </block> <block wx:if={{isActive==true&&status=='2'}}> <scroll-view scroll-y=true class=posContainer> <block wx:for={{cur}} data-index='index' wx:for-index='index' wx:key=index> <view class=title>{{item.title}}</view> <view class=poscontent> <view wx:for={{item.types}} wx:for-item=type wx:key='id' wx:for-index={{index}} data-index={{index}}> <view class=tag {{isSelect&&index==curIndex?'select':''}} data-id={{id}} bindtap=multiSelect>{{type}}</view> </view> </view> </block> <view class=confirm> <button class=weui-btn type=warn>确认</button> </view> </scroll-view> </block> <block wx:if={{isActive==true&&status=='3'}}> <view class=orderContainer> <view class=block>智能排序</view> <view class=block>时间排序</view> <view class=block>薪资排序</view> </view> </block> <view class=listContainer > <view wx:for={{jobList}} wx:key=index data-index={{index}}> <template is=list-item data={{...item}} /> </view> </view> <view class=search bindtap=search> <image src=../../youzan-image/search.png /> <text>搜索</text> </view> </view>
wxss
page { position: relative; width: 100%; height: 100vh; } .header { width: 100%; height: 80rpx; position: fixed; top: 0; display: flex; flex-direction: row; justify-content: space-between; text-align: center; color: #313131; font-size: 16px; border-bottom: 1rpx solid #eeeeee; z-index: 9999; background-color: #fff; } .filterCity { flex: 1; position: relative; height: 80rpx; line-height: 80rpx; } .filterJob { position: relative; flex: 1; height: 80rpx; line-height: 80rpx; } .filterOrder { position: relative; flex: 1; height: 80rpx; line-height: 80rpx; } .header image { position: absolute; right: 15rpx; top: 26rpx; width: 30rpx; height: 30rpx; } .active { color: #ef0001; } .mask { width: 100%; height: 100%; position: fixed; top: 80rpx; background-color: rgba(15, 15, 26, 0.3); } .cityContainer { display: flex; flex-direction: row; justify-content: space-around; align-items: space-between; flex-wrap: wrap; width: 100%; height: 300rpx; z-index: 999; background-color: #fff; border-bottom: 1rpx solid #e9e9e9; padding-bottom: 130rpx; } .cityContainer .city { display: block; font-size: 15px; margin-top: 100rpx; width: 150rpx; height: 50rpx; line-height: 50rpx; text-align: center; border: 1rpx solid #e9e9e9; overflow: hidden; } .select { color: #ffffff; background-color: #ed0000; } .posContainer { height: 980rpx; width: 100%; background-color: #fff; /* overflow:auto; */ } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .title { margin-top: 55rpx; font-size: 15px; margin-left: 28rpx; } .poscontent { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -15rpx; } .tag { margin-left: 28rpx; margin-top: 23rpx; font-size: 13px; width: 150rpx; height: 50rpx; line-height: 50rpx; text-align: center; border: 1rpx solid #e9e9e9; } .confirm { width: 100%; height: 150rpx; border: 1rpx solid transparent; background-color: #fff; } .weui-btn { position: fixed; width: 95%; bottom: 52rpx; left: 50%; transform: translateX(-50%); } .orderContainer { display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-color: #fff; width: 100%; height: 125rpx; } .block { font-size: 13px; width: 200rpx; height: 50rpx; line-height: 50rpx; text-align: center; border: 1rpx solid #e9e9e9; } .search { position: fixed; bottom: 80rpx; background-color: #fff; right: 25rpx; width: 150rpx; height: 75rpx; line-height: 75rpx; text-align: center; border-radius: 35rpx; box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5; } .search image { width: 30rpx; height: 30rpx; } .search text { font-size: 15px; padding-left: 9rpx; color: #666666; } .listContainer { width: 100%; height: 100%; margin-top: 80rpx; }
js
import category from '../../api/employ' import jobList from '../../api/detail' Page({ data: { curIndex: '', isActive: false, jobList:[], cur: [], job: [], isShow: true, status: 0, isMask: false, isSelect: false, city: ['全国', '杭州', '北京', '深圳', '上海', '广州', '武汉', '重庆'] }, changeStatus(e) { let status = e.currentTarget.dataset.status; let cur = category; this.setData({ isActive: !this.data.isActive, status: status, isMask: !this.data.isMask, cur: cur, }) }, select(e) { let curIndex = e.currentTarget.dataset.index; this.setData({ isSelect: curIndex == this.data.curIndex ? '!this.data.isActive' : 'true' , isActive: false, isMask:false, curIndex: curIndex, }) }, multiSelect(e){ let multiIndex=e.currentTarget.dataset.index; this.setData({ isSelect:!this.data.isSelect, curIndex:multiIndex }) }, search(e) { wx.navigateTo({ url: '../search/search', }) }, onLoad: function (e) { this.setData({ jobList:jobList }) }, click:function (e) { let id =e.currentTarget.dataset.id; wx.navigateTo({ url: `../detail/detail?id=${id}`, }) } })
相信看了本文案例你已经掌握了方法,更多精彩请关注编程之家网其它相关文章!
推荐阅读:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。