微信小程序实现弹出菜单功能（微信小程序弹窗功能实现）

微信小程序实现弹出菜单功能（微信小程序弹窗功能实现）

需求

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

要解决的问题

如何解决？

::-webkit-scrollbar {width: 0;height: 0;color: transparent;}-

具体实现

wxml

城市筛选 职位筛选 排序方式 {{item}} {{item.title}} {{type}} 确认 智能排序 时间排序 薪资排序 搜索 -

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}`, }) }})-

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。