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


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 相关文章推荐
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
javascript每日必学之继承
Feb 23 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
React组件生命周期详解
Jul 03 Javascript
浅析vue深复制
Jan 29 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
js判断浏览器是否支持html5
2014/08/17 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
浅析vue深复制
2018/01/29 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
django富文本编辑器的实现示例
2019/04/10 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
公益广告语集锦
2014/03/13 职场文书
2014年少先队工作总结
2014/12/03 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python