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


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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JavaScript网页制作特殊效果用随机数
May 22 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python内置模块collections知识点总结
2019/12/19 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
复兴之路观后感3000字
2015/06/02 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Nginx速查手册及常见问题
2022/04/07 Servers