三十七 搜索关键词判断 和隐藏键盘

91 阅读1分钟

image.png

image.png

image.png

完整代码:

<template>
        <view>
                <Lines />
                <view class="search-item">
                        <view class="search-title">
                                <view class="f-colo">
                                        最近搜索
                                </view>
                                <view class="iconfont icon-lajitong">
                                </view>
                        </view>
                        <view>
                                <view class="search-name f-colo">
                                        四件套
                                </view>
                                <view class="search-name f-colo">
                                        内衣
                                </view>
                        </view>
                </view>
                <view class="search-item">
                        <view class="search-title">
                                <view class="f-colo">
                                        热门搜索
                                </view>
                        </view>
                        <view>
                                <view class="search-name f-colo">
                                        四件套
                                </view>
                                <view class="search-name f-colo">
                                        内衣
                                </view>
                        </view>
                </view>
        </view>
</template>

<script>
        import Lines from "@/components/common/lines.vue"
        export default {
                data() {
                        return {
                                keyword: ''
                        }
                },
                // 标题栏右侧 搜索按钮点击
                onNavigationBarButtonTap() {
                        this.search()
                },
                // 监听input输入内容的
                onNavigationBarSearchInputChanged(e) {
                        this.keyword = e.text
                },
                // 监听软键盘上搜索按钮的
                onNavigationBarSearchInputConfirmed(e){
                        this.search()
                },
                components: {
                        Lines
                },
                methods: {
                        // 判断关键词是否为空
                        search(){
                                if(this.keyword === ""){
                                        return uni.showToast({
                                                title:'关键词不能为空',
                                                icon:"none"
                                        })
                                }else{
                                        uni.navigateTo({
                                                url: '../search-list/search-list'
                                        })
                                }
                                // 隐藏软键盘
                                uni.hideKeyboard();
                        }
                }
        }
</script>

<style>
        .search-item {
                margin: 20rpx;
        }

        .search-title {
                display: flex;
                justify-content: space-between;
        }

        .search-name {
                padding: 4rpx 24rpx;
                background-color: #E1E1E1;
                display: inline-block;
                border-radius: 26rpx;
                margin: 10rpx;
        }
</style>