When writing a small program in uniapp, I encountered the use of some page components, such as the drop-down selection box and the search selection box.
1. Pull down to select the component. This component was excerpted by a blogger for so long that I forgot the source. It was also my first time to write a small program using uniapp. I was actually not satisfied with this drop-down box. I changed it myself because I didn’t have enough data. If the drop-down box does not disappear, I will disable it and then there will be less references: noData ='no more'. There is a problem with the original search and I will change it. If there is a better way to deal with it, please tell me.
<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 Page reference
import FuzzyList from "../../node_modules/components/qj-fuzzy-search/index.vue"
1.2 Quote the code, label-name="mcName", replace mcName with your own, value-name="mcId" replace mcId with your own: list="company" company is the background data
<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>
I also changed the method in 1.3, otherwise the search would not be possible.
//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. A simple drop-down box selection box is suitable for those with a small amount of data. I have also been able to change this, because the original one cannot select any data. The new labelName and valueName are added.
<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 Page reference
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()
},
That's all for now. There is a better way for the elder brother to inform the younger brother.