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


Posted in Javascript onJune 12, 2018

需求

点击标签栏按钮,向下弹出菜单,再次点击,收回菜单

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

要解决的问题

  1. 标签栏三栏样式,标签栏固定不动;
  2. 点击标签栏弹出菜单,并且出现透明遮罩;
  3. 遮罩优先级在弹出框之下;
  4. 弹出框内标签的设置;
  5. 滚动栏滚动条的隐藏

如何解决?

  1. 弹性布局,横向,三者平分整栏;
  2. 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度
  3. 弹出框设置z-index;
  4. 弹性布局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}`,
  })
 }
})

总结

以上所述是小编给大家介绍的微信小程序实现弹出菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
详解vue-cli3多页应用改造
Jun 04 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 #Javascript
微信小程序收藏功能的实现代码
Jun 12 #Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 #Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
You might like
php adodb介绍
2009/03/19 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
IE8 原生JSON支持
2009/04/13 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python3爬取各类天气信息
2018/02/24 Python
python逆序打印各位数字的方法
2018/06/25 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
公司活动方案范文
2014/03/06 职场文书
竞聘上岗演讲
2014/05/19 职场文书
委托书的格式
2014/08/01 职场文书
个人总结与自我评价
2014/09/18 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
营运督导岗位职责
2015/04/10 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python