更新记录

1.0.0（2025-01-16）

无

平台兼容性

uni-app

其他

使用说明

简介

仿网易云搜索列表组件 -支持多端 可自定义 - 兼容vue2/3、小程序，app-vue

引入

默认为easycom模式，可直接键入<shinn-xNeteaseSearch>标签。

事件列表

/**
 * onSearchConfirm搜索框点击确认时触发
 * onHistoryClick搜索历史点击时触发
 * onSearchInput搜索框输入内容时触发
 * onSuggestClick点击搜索建议结果列表时触发
 * onSuggestTitleClick点击搜索头部标题时触发
 * onTagClick标签Tag被点击时触发
 */

参数列表

initSearchValue: {
    //搜索框默认显示的文字
    type: String,
    default: "",
    required: false,
},
placeholder: {
    //搜索框默认提示文字
    type: String,
    default: "搜索歌曲、歌手、专辑",
    required: false,
},
clearable: {
    //搜索框内容是否显示清空按钮
    type: Boolean,
    default: true,
    required: false,
},
tagList: {
    //Tag数组
    type: Array,
    default: () => {
        return []
    },
    required: false,
},
tagTitle: {
    //Tag标题
    type: String,
    default: "热门搜索",
    required: false,
},
maxHistoryListCount: {
    //最大保存历史搜索记录数量
    type: Number,
    default: 10,
    required: false,
},
suggestList: {
    //搜索提示建议数组
    type: Array,
    default: () => {
        return []
    },
    required: false,
}

示例代码

<template>
    <view>
        <shinn-xNeteaseSearch :suggestList.sync="suggestList" :tagList="tagList"
            @onSearchInput="onSearchInput" @onTagClick="onTagClick" @onSearchConfirm="onSearchConfirm"
            @onHistoryClick="onHistoryClick" @onSuggestTitleClick="onSuggestTitleClick"
            @onSuggestClick="onSuggestClick">
            <template #default>
                <view class="result">
                    <view class="item" v-for="item in 10" :key="item">
                        根据产品需求实现搜索结果{{item}}
                    </view>
                </view>
            </template>
        </shinn-xNeteaseSearch>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showResult: false,
                suggestList: ["1", "2", "3", "4", "5"],
                tagList: ["爱我还是他", "唯一", "龙拳", "一点点", "告白气球", "可惜没如果", "突然好想你", "你不是真正的快乐", "恋爱循环", "知足"]
            }
        },
        methods: {
            onTagClick(item) {
                console.log(item)
            },
            onSuggestClick(item) {
                console.log(item)
            },
            onSuggestTitleClick() {
                console.log("onSuggestTitleClick")
            },
            onSearchConfirm(value) {
                console.log(value)
            },
            onSearchInput(value) {
                console.log(value)
            },
            onHistoryClick(item) {
                console.log(item)
            }
        }
    }
</script>

<style scoped lang="scss">
.result{
    display:flex;
    .item{
        width:100%;
        height: 100rpx;
        border: 1rpx solid #eee;
        margin: 20rpx;
        text-align: center;
        line-height: 100rpx;
    }
}
</style>