更新记录

1.0.10（2024-09-03） 下载此版本

优化

1.0.9（2024-08-26） 下载此版本

隐藏scroll-view滚动条

1.0.8（2024-08-26） 下载此版本

增加borderColor边框颜色属性

平台兼容性

uni-app

uni-app x

文本框搜索弹出层选择器

一个文本输入框搜索引发的血战，自己写了套组件。支持文本输入查询结果出现弹出下拉层。

属性

事件

插槽Slots

基本用法

弹出层使用方法：

<template>
        <view class="input-readonly" @click="exampleFn1()">
            <uni-easyinput type="text" :inputBorder="true" v-model="form.data1" placeholder="点击弹出层"
                suffixIcon="search" disabled @iconClick="show = true"></uni-easyinput>
        </view>

        <uni-popup ref="exampleRef" @change="change()" @maskClick="resetFn()">
            <ly-search-picker ref="lySearchPickerRef" :alwaysShow="alwaysShow" max-height="60vh" :data="data"
                :initQuery='initQuery' :isNoMore="isNoMore" @getApiReqFn="demoApiFn()"
                @closePicker="closeLySearchPicker()" @lower="demoApiFn('上拉加载',true)" @confirm="confirm()" />
        </uni-popup>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    data1: '',
                    data2: ''
                },
                alwaysShow: false,
                data: [],
                isNoMore: false,
                initQuery: ''
            }
        },
        methods: {
            exampleFn1() {
                this.$refs.exampleRef.open('top')
            },
            exampleFn2() {
                uni.navigateTo({
                    url: '/pages/index2/index2'
                })
            },
            closeLySearchPicker() {
                this.$refs.exampleRef.close()
            },
            change(e) {
                // 实时改变可以自动获取焦点
                this.alwaysShow = e.show
            },
            resetFn() {
                this.$refs.lySearchPickerRef.reset()
            },
            demoApiFn(val, more = false) {
                this.isNoMore = false
                if (!val) {
                    this.data = []
                    return
                }
                let num = 30
                if (more) {
                    num = num + 60
                    this.isNoMore = true
                }

                const arr = []
                // 模拟接口请求
                setTimeout(() => {
                    for (let i = 1; i <= num; i++) {
                        arr.push({
                            id: i,
                            name: `${i} 文本显示内容文本显示内容文本显示内容文本显示内容文本显示内容`
                        })
                    }
                    this.data = arr
                }, 200)
            },
            confirm(item) {
                this.form.data1 = item.name
                this.initQuery = item.name
            }
        }
    }
</script>

页面中直接使用方法：

<template>
    <view class="example2">
        <ly-search-picker ref="lySearchPickerRef" :placeholder="placeholder" :data="data" :isNetwork="false"
            :isBlurClose="false" :isNoMore="isNoMore" :initQuery='initQuery' cancelButton="auto" @cancel="cancel()"
            @confirm="confirm()" />
        <view class="view-wrap">这里是页面内容，可能是产品的讨厌需求</view>
        <view class="view-wrap bg">这里是页面内容，可能是产品的讨厌需求</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                initQuery: '',
                data: [],
                isNoMore: false,
                placeholder: '我不走接口数据'
            }
        },
        onLoad() {
            // 模拟接口一次性请求全部数据
            setTimeout(() => {
                const arr = []
                for (let i = 1; i <= 100; i++) {
                    arr.push({
                        id: i,
                        name: `${i} 文本显示内容文本显示内容文本显示内容文本显示内容文本显示内容`
                    })
                }
                this.data = arr
                this.isNoMore = true
            }, 200)
        },
        methods: {
            cancel() {
                // 其他
            },
            confirm(item) {
                this.initQuery = item.name
                this.placeholder = item.name
            }
        }
    }
</script>