uniapp 仿微信的右边下拉选择弹出框的实现代码


Posted in Javascript onJuly 12, 2020

在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件

这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单

uniapp 仿微信的右边下拉选择弹出框的实现代码

这里首先用一个单独的页面存放这个组件

<template>
//这里是搜索框的输入框 不需要的可以删掉
 <view>
 <view class="arrivalSearch">
  <view class="arrivalSmallsearch">
   <view class="arrivalSearchInput">
   <input type="text" :placeholder="dateinit">
   </view>
   //这里是输入框旁边的图标(这里的图标是一张图片)
   <image src="../../static/img/nav.png" mode="aspectFill" @click.stop="ShowHidden = !ShowHidden"> </image>
  </view>
 </view>
 //这里是弹出来的下拉筛选框
 <view class="arrivalNavigation" v-if="ShowHidden">
  <view class="d4"></view>
  <view class="sideNavigation">
  <nav>
  <ul>
   <navigator url="../arrivalQuery/arrivalQuery">
   <li>到货查询</li>
   </navigator>
   <view class="liBottomBorder"></view>
  <navigator url="../retailStore/retailStore"><li>门店查询</li></navigator>
   <view class="liBottomBorder"></view>
   <navigator url="../itemNoQuery/itemNoQuery"><li>货号查询</li></navigator>
   <view class="liBottomBorder"></view>
   <navigator url="../priceReductionQuery/priceReductionQuery"><li>降价查询</li></navigator>
  </ul>
  </nav>
  </view>
 </view>
 </view>
</template>

<script>
 export default {
  data() {
  return {
   ShowHidden: false,
   dateinit:'请输入货号',
  };
  },
  methods: {
   // 点击页面事件 隐藏需要隐藏的区域
   HiddenClick () {
    this.ShowHidden = false
   },
  },
  mounted () {
    // document.addEventListener('click', this.HiddenClick)
   },
 }
</script>

<style lang="less">
 .arrivalSearch{
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx #eee;
 .arrivalSmallsearch{
  width: 96%;
  display: flex;
  .arrivalSearchInput{
    height: 70rpx;
    background-color: #F0F1F6;
    border-radius: 40rpx;
    font-size: 25rpx;
    margin-left: 10rpx;
    margin-top: 10rpx;
    width: 608rpx;
  }
  input{
  width: 80%;
    margin-left: 40rpx;
  margin-top: 10rpx;
  }
  image{
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  }
 }
 
 }
 //从这里开始是弹出框的样式 不需要搜索框的 前面样式都不用加
 .arrivalNavigation{
  width: 250rpx;
  position: absolute;
   right:20rpx;
  z-index: 99;
  .sideNavigation{
   width: 248rpx;
   background-color: #202020;
   color: #eee;
   border-radius: 10rpx;
    li{
    height: 85rpx;
    text-align: center;
    line-height: 85rpx;
    font-size: 25rpx;
    }
    .liBottomBorder{
   border: 0.1rpx solid #373737;
    }
   
   }
   .d4{
   // position: absolute;
   //  left: 140rpx;
    width: 0; 
    height: 0;
   margin-left: 150rpx;
   margin-top: -20rpx;
    border-width:20rpx;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
   
   }
  }
</style>

然后在main.js中引入页面

import springBox from 'pages/springBox/springBox'
Vue.component('springBox',springBox)

最后直接在需要使用的页面使用组件就可以了

<springBox></springBox>

到此这篇关于uniapp 仿微信的右边下拉选择弹出框的实现代码的文章就介绍到这了,更多相关uniapp 下拉选择弹出框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 #Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 #Javascript
You might like
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
邀请函格式范文
2015/02/02 职场文书
护士自荐信怎么写
2015/03/06 职场文书
垂直极限观后感
2015/06/08 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python