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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
如何使用python切换hosts文件
2020/04/29 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
python+opencv实现车道线检测
2021/02/19 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
网络教育自我鉴定
2014/02/04 职场文书
参观接待方案
2014/03/17 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
Python实现双向链表
2022/05/25 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers