写uniapp写小程序遇到一些页面组件的使用，下拉选择框 搜索选择框 ，
1.下拉选择组件，这个组件摘抄一个博主的时间太久忘记出处了，我也是第一次用uniapp写小程序，这个下拉框其实不太满意，我自己改了一下，因为数据没得时候下拉框不消失 我就吧 禁掉了 然后引用的时候 少了 :noData =‘没有了’，原本的搜索有问题 我也改了一下，如果有更好的处理方式大哥说一下
<template>
<view class="index">
<view class="search" v-if="show">
<scroll-view class="list" scroll-y v-if="list.length > 0" :lower-threshold="10" @scrolltolower="scrolltolower">
<view
v-for="item in list"
:key="item[valueName]"
class="item"
:style="[setItemStyle]"
hover-class="item-hover"
hover-start-time="0"
hover-stay-time="100"
@click="click(item)"
>
{{ item[labelName] }}
</view>
</scroll-view>
<!-- <view class="empty" v-else>{{ noData }}</view> -->
</view>
</view>
</template>
<script>
export default {
props: {
/** 展示整体组件 */
show: {
type: Boolean,
default: false
},
/** 需要展示的列表 */
list: {
type: Array,
default: () => []
},
/** 自定义label */
labelName: {
type: String,
default: 'label'
},
/** 自定义value */
valueName: {
type: String,
default: 'value'
},
/** 无内容时显示的内容 */
noData: {
type: String,
default: '暂无匹配内容...'
},
/** item的对齐样式 */
align: {
type: String,
default: 'left',
validator: value => {
return ['left', 'center', 'right'].includes(value);
}
},
/** 自定义item展示样式 */
customStyle: {
type: Object,
default: () => ({})
}
},
computed: {
/** 设置item的样式 */
setItemStyle() {
const { align, customStyle } = this;
return {
textAlign: align,
...customStyle
};
}
},
methods: {
/** item点击事件 */
click(item) {
this.$emit('select', { ...item });
},
/** 触底加载下一页 */
scrolltolower() {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
.index {
width: 100%;
position: absolute;
z-index: 9;
}
.search {
.list,
.empty {
padding: 10rpx;
background-color: #fff;
box-shadow: 0 0 10rpx #888;
border-radius: 10rpx;
}
.list {
box-sizing: border-box;
max-height: 300rpx;
overflow: hidden;
.item {
padding: 8rpx 0;
font-size: 26rpx;
margin: 5rpx 0;
&-hover {
background-color: #f5f5f5;
}
}
}
.empty {
height: 80rpx;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
1.1 页面引用
import FuzzyList from "../../node_modules/components/qj-fuzzy-search/index.vue"
1.2引用代码，label-name=“mcName”，mcName换成自己的，value-name=“mcId” mcId换成自己的 :list=“company” company是后台数据
<u-form-item label="收货单位" prop="msName" borderBottom>
<!-- <view style="text-align: center;"></view> -->
<view class="content">
<u-input v-model="form.msTakeName" class="input" type="text" :value="value_sf" placeholder="请输入收货单位" @input="input_sf" />
<fuzzy-list label-name="msName" value-name="msId" align="center" no-data="暂无匹配内容,请直接输入"
:show="show_sf" :list="shoufa" :custom-style="{ fontSize: '30rpx' }"
@scrolltolower="scrolltolower_sf" @select="select_sf"></fuzzy-list>
</view>
</u-form-item>
1.3里面的方法，我也改了 不然搜索实现不了
//data中定义的变量
queryParams: {
pageSize: 10,
pageNum: 1
},
show_sf: false,
value_sf: '',
//
scrolltolower_sf() {
console.log("0000000000000000000000")
this.queryParams.pageNum++;
this.getList();
},
select_sf(event) {
//这个地方两个变量设置为空你们不用管，我是为了实现没得数据的时候，写入的数据是新数据，后端需要录入，如果没这个要求可以吧，可以吧1中我禁掉的代码放开，在引用的组件中加入:noData ='没有了'，就可以了
this.form.msTakeId = '';
this.form.msTakeName = '';
console.log("event", event)
this.show_sf = false;
this.value_sf = event.msName;
//这里是数据放入提交的表单中去
this.form.msTakeId = event.msId;
this.form.msTakeName = event.msName;
},
getList() {
//this.shoufaList = this.shoufa;
/** 输入框内有值就进行搜索，没有值就关闭 */
if (this.value_sf != '') {
这个地方新的数组来接收 上面定义的没写，不去接收includes不生效我也不知道咋回事，
this.shoufa = [];
this.shoufa = this.shoufaList.filter(item => item.msName.includes(this.value_sf))
if (!this.show_sf){
this.show_sf = true;
}
//console.log("this.", this.shoufa.filter(item => item.msName.includes(this.value_sf)))
} else {
//这地方是后端的数据我用两个数据去接收的，当选择后又不选择就去赋值；
this.shoufa = this.shoufaList;
this.show_sf = false;
}
},
2.单纯的下拉框选择框适合数据量少的，这个我也是改过得，因为原来的不可做任何数据的选择新增的labelName和valueName
<template>
<view class="easy-select" @click.stop="trigger" :style="[easySelectSize]">
<input type="text" v-model="value" :placeholder="placeholder" disabled clearable>
<view class="easy-select-suffix" :style="{border: '1px solid rgba（0,0,0,0)'}" :class="[showSuffix]">
<view class="easy-select-down-tag">^</view>
</view>
<view class="easy-select-options" v-if="showOptions" :style="{'min-width': boundingClientRect.width + 'px', top: optionsGroupTop, margin: optionsGroupMargin}">
<view class="easy-select-options-item" v-for="item in options" :key="item[valueName]" @click.stop="select(item)" :class="{active: currentSelect.label === item.label}">
<text>{{item[labelName]}}</text>
</view>
</view>
</view>
</template>
<script>
/**
* easy-select
* @author Snoop zhang
* @description Select Component
* */
const COMPONENT_NAME = 'easy-select'
const MAX_OPTIONS_HEIGHT = 137 // 修改务必也修改easy-select-options的css部分
const OPTIONS_ITEM_HEIGHT = 33 // 修改务必也修改easy-select-options-item的css部分
const OPTIONS_MARGIN = 10
const OPTIONS_PADDING = 6 * 2 + 2 // + 2是border
const OPTIONS_OTHER_HEIGHT = OPTIONS_MARGIN + OPTIONS_PADDING
const STORAGE_KEY = '_easyWindowHeight'
const SIZE = {
'medium': {
width: '240px',
height: '40px'
},
'small': {
width: '200px',
height: '30px'
},
'mini': {
width: '160px',
height: '30px'
}
}
export default {
name: COMPONENT_NAME,
props: {
windowHeight: {
type: [Number, String],
default: 0
},
placeholder: {
type: String,
default: '请选择'
},
value: {
type: String,
default: 'lable'
},
/** 自定义label */
labelName: {
type: String,
default: 'value'
},
/** 自定义value */
valueName: {
type: String,
default: 'lable'
},
size: {
type: String,
default: 'medium'
},
options: {
type: Array,
default () {
return [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
}
}
},
data() {
return {
showOptions: false,
boundingClientRect: {},
currentSelect: {},
optionsGroupTop: 'auto',
optionsGroupMargin: ''
}
},
computed: {
showSuffix() {
return this.showOptions ? 'showOptions' : 'no-showOptions'
},
easySelectSize() {
let size = this.size.toLowerCase()
if (size in SIZE) {
return {
width: SIZE[size].width,
height: SIZE[size].height
}
} else {
return {}
}
}
},
mounted() {
const elQuery = uni.createSelectorQuery().in(this)
elQuery.select('.easy-select').boundingClientRect(data => {
this.boundingClientRect = data
}).exec();
try {
if (!this.windowHeight) {
const storageHeihgt = uni.getStorageSync(STORAGE_KEY)
if (storageHeihgt) {
this.easyWindowHeight = storageHeihgt
return
}
const res = uni.getSystemInfoSync();
this.easyWindowHeight = res.windowHeight
uni.setStorageSync(STORAGE_KEY, this.easyWindowHeight)
}
} catch (e) {
// error
}
},
methods: {
trigger(e) {
const view = uni.createSelectorQuery().in(this)
view.select('.easy-select').fields({rect: true}, data => {
let { top, bottom } = data
const thresholdHeight = Math.min(MAX_OPTIONS_HEIGHT + OPTIONS_MARGIN, (this.options.length * OPTIONS_ITEM_HEIGHT) +
OPTIONS_OTHER_HEIGHT)
bottom = Number(this.windowHeight || this.easyWindowHeight) - (top + this.boundingClientRect.height) // 距离底部的距离等于视口的高度减上top加select组件的高度
// judge direction
if (bottom < thresholdHeight) {
this.optionsGroupDirection = 'up'
this.optionsGroupTop = -thresholdHeight - 12 + 'px'
this.optionsGroupMargin = '0'
} else {
this.optionsGroupDirection = 'down'
this.optionsGroupTop = 'auto'
this.optionsGroupMargin = '10px 0 0 0'
}
// if (this.scrollTop < )
this.showOptions = !this.showOptions
}).exec();
},
select(options) {
this.showOptions = false
this.currentSelect = options
this.$emit('selectOne', options)
},
hideOptions() {
this.showOptions = false
}
}
}
</script>
<style scoped>
.easy-select {
position: relative;
border: 1px solid #dcdfe6;
border-radius: 4px;
/* font-size: 28rpx; */
color: #606266;
outline: none;
box-sizing: content-box;
height: 30px;
}
.easy-select input {
padding: 0 18rpx;
padding-right: 60rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 100% !important;
min-height: 100% !important;
}
.easy-select .easy-select-suffix {
position: absolute;
box-sizing: border-box;
height: 100%;
right: 5px;
top: 0;
display: flex;
align-items: center;
transform: rotate(180deg);
transition: all .3s;
transform-origin: center;
}
.easy-select .showOptions {
transform: rotate(0) !important;
}
.easy-select .no-showOptions {
transform: rotate(180deg) !important;
}
.easy-select .easy-select-options {
position: absolute;
padding: 6px 0;
margin-top: 10px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
transform-origin: center top;
z-index: 2238;
overflow: scroll;
max-height: 274rpx;
}
.easy-select .easy-select-options-item {
padding: 0 20rpx;
position: relative;
white-space: nowrap;
font-size: 14px;
color: #606266;
height: 33px;
line-height: 33px;
box-sizing: border-box;
}
.easy-select .active {
background-color: #F5F7FA
}
</style>
2.1页面引用文章来源：https://www.toymoban.com/news/detail-719065.html
import EasySelect from "../../node_modules/components/easy-select/easy-select.vue"
<u-form-item label="选择部门" prop="mbName" borderBottom>
<view class="content" @click="useOutClickSideb">
<easy-select ref="easySelectb" label-name="maName" value-name="maId" size="medium"
:value="selecValueb" @selectOne="selectOneb" :options="department"></easy-select>
</view>
</u-form-item>
//方法
selectOneb(options) {
console.log("options部门", options)
this.form.maId = options.maId;
this.selecValueb = options.maName;
},
useOutClickSideb() {
this.$refs.easySelectb.hideOptions && this.$refs.easySelectb.hideOptions()
},
暂时就这些了，那个大哥更好的方式告知小弟一声文章来源地址https://www.toymoban.com/news/detail-719065.html
到了这里，关于关于uniapp 小程序的下拉框搜索选择的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
