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

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

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

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

 .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); 
   
   }
  }

然后在main.js中引入页面

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

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

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