uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo

前端  /  管理员 发布于 3年前   1050

首页列表页搜索功能开发

首页列表视图：/pages/index/index.

<template>
    <view>
        <view>
            <view>
                <navigator hover-class="none" url="../search/search">
                    <text class="lg cuIcon-search i_search_gray"></text>
                    <text>{{col.search_tit}}</text>
                    <view hover-class='hover_act' class="lg text-gray cuIcon-close" @click.stop="searchClose"></view>
                </navigator>
            </view>
        </view>
    </view>
</template>

js代码：

<script>
    from '@/utils/utils.js'
    export default {
        data() {
            return {
                col: {
                    search_tit: '输入地址',
                },
                getPlistData: { //参数
                    bankid: '',
                    sheng: '',
                    shi: 373,
                    qu: '',
                    wdtype:1
                }
            };
        },
        components: {
        },
        onReachBottom() {
        },
        onLoad(e:any) {
            let that = this;
            if (e.id) {
                that.getPlistData.search_word = e.id;
                that.col.search_tit = e.id;
            }
        },
        onHide() {
        },
        onShow() {
            console.log("页面onShow")
        },
        methods: {
            searchClose():void {
                if (this.getPlistData.search_word) {
                    this.getPlistData.search_word = '';
                    this.col.search_tit = '输入';
                }
            },
        },
        created() {
        },
        computed: {
        }
    }
</script>

css代码省略...

搜索页 （首页点击搜索框跳转进来）

/pages/search/search.vue

<template>
    <view>
        <view>
            <view>
                <!--input添加可以监听输入 @input="inputChange"  -->
                <input
                    type="text"
                    :adjust-position="true"
                    :placeholder="defaultKeyword"
                    v-model="keyword" @confirm="doSearch(false)"
                    placeholder-class="placeholder-class" confirm-type="search">
            </view>
            <view @tap="doSearch(false)">搜索</view>
        </view>
        <view >
            <scroll-view v-show="isShowKeywordList" scroll-y>
                <block v-for="(row,index) in keywordList" :key="index">
                    <view hover-class="keyword-entry-tap" >
                        <view @tap.stop="doSearch(keywordList[index].keyword)">
                            <rich-text :nodes="row.htmlStr"></rich-text>
                        </view>
                        <view @tap.stop="setKeyword(keywordList[index].keyword)">
                            <image src="/static/image/back.png"></image>
                        </view>
                    </view>
                </block>
            </scroll-view>
            <scroll-view v-show="!isShowKeywordList" scroll-y>
                <view v-if="oldKeywordList.length>0">
                    <view>
                        <view>历史搜索</view>
                        <view>
                            <image @tap="oldDelete" src="/static/image/delete.png"></image>
                        </view>
                    </view>
                    <view>
                        <view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
                    </view>
                </view>
                <view>
                    <view>
                        <view>热门搜索</view>
                        <view>
                            <image @tap="hotToggle" :src="'/static/image/attention'+forbid+'.png'"></image>
                        </view>
                    </view>
                    <view v-if="forbid==''">
                        <view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
                    </view>
                    <view v-else>
                        <view>当前搜热门搜索已隐藏</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
    from '@/utils/localCache.js';
    export default {
        data() {
            return {
                defaultKeyword: "",
                keyword: "",
                oldKeywordList: [],
                hotKeywordList: [],
                keywordList: [],
                forbid: '',
                isShowKeywordList: false
            }
        },
        onLoad() {
            this.init();
        },
        onShow(){
        },
        methods: {
            init() {
                this.loadDefaultKeyword();
                this.loadOldKeyword();
                this.loadHotKeyword();
            },
            blur(){
                uni.hideKeyboard()
            },
            //加载默认搜索关键字
            loadDefaultKeyword() {
                //定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
                this.defaultKeyword = "输入地址";
            },
            //加载历史搜索,自动读取本地Storage
            loadOldKeyword() {
                let that=this;
                uni.getStorage({
                    key: 'OldKeys',
                    success: (res) => {
                        console.log(res,"dfsa")
                        if(!res.data){
                            res.data="[]"
                        }
                        var OldKeys = JSON.parse(res.data);
                        that.oldKeywordList = OldKeys;
                    }
                });
            },
            //加载热门搜索
            loadHotKeyword() {
                //定义热门搜索关键字，可以自己实现ajax请求数据再赋值
                this.hotKeywordList = ['热门搜索1','热门搜索2','热门搜索3'];
            },
            //高亮关键字
            drawCorrelativeKeyword(keywords, keyword) {
                var len = keywords.length,
                    keywordArr = [];
                for (var i = 0; i < len; i++) {
                    var row = keywords[i];
                    //定义高亮#9f9f9f
                    var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
                    html = '<div>' + html + '</div>';
                    var tmpObj = {
                        keyword: row[0],
                        htmlStr: html
                    };
                    keywordArr.push(tmpObj)
                }
                return keywordArr;
            },
            //顶置关键字
            setKeyword(index) {
                this.keyword = this.keywordList[index].keyword;
            },
            //清除历史搜索
            oldDelete() {
                uni.showModal({
                    content: '确定清除历史搜索记录？',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            this.oldKeywordList = [];
                            uni.removeStorage({
                                key: 'OldKeys'
                            });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            //热门搜索开关
            hotToggle() {
                this.forbid = this.forbid ? '' : '_forbid';
            },
            //执行搜索
            doSearch(keyword) {
                keyword = keyword===false?this.keyword:keyword;
                this.keyword = keyword;
                this.saveKeyword(keyword); //保存为历史 
                console.log(keyword,"搜索")
                uni.reLaunch({
                    url: '/pages/index/index?id='+keyword
                })
                uni.showToast({
                    title: keyword,
                    icon: 'none',
                    duration: 2000
                });
            },
            //保存关键字到历史记录
            saveKeyword(keyword) {
                uni.getStorage({
                    key: 'OldKeys',
                    success: (res) => {
                        if(!res.data){
                            res.data="[]"
                        }
                        var OldKeys = JSON.parse(res.data);
                        var findIndex = OldKeys.indexOf(keyword);
                        if (findIndex == -1) {
                            OldKeys.unshift(keyword);
                        } else {
                            OldKeys.splice(findIndex, 1);
                            OldKeys.unshift(keyword);
                        }
                        //最多10个纪录
                        OldKeys.length > 10 && OldKeys.pop();
                        uni.setStorage({
                            key: 'OldKeys',
                            data: JSON.stringify(OldKeys)
                        });
                        this.oldKeywordList = OldKeys; //更新历史搜索
                    },
                    fail: (e) => {
                        var OldKeys = [keyword];
                        uni.setStorage({
                            key: 'OldKeys',
                            data: JSON.stringify(OldKeys)
                        });
                        this.oldKeywordList = OldKeys; //更新历史搜索
                    }
                });
            }
        }
    }
</script>

效果图:

首页：

搜索页：

百度开发者工具里面Console面板 参数

页面隐藏onHide
{data: "["西城支行","广州"]"} "dfsa"
西城支行 搜索
页面onShow
开发者工具暂不支持返回wgs84坐标，默认返回gcj02坐标系, 请在百度APP中调试此功能
{search_word: "西城支行", …}
search_word:"西城支行"
__proto__:Object