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'
Vueponent('springBox',springBox)
最后直接在需要使⽤的页⾯使⽤组件就可以了
<springBox></springBox>
到此这篇关于uniapp 仿的右边下拉选择弹出框的实现代码的⽂章就介绍到这了，更多相关uniapp 下拉选择弹出框内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。