uni-app标题导航栏官方例子

例子位置：

源码：

<template>
    <view class="page">
        <swiper indicator-dots="true">
            <swiper-item v-for="(img, key) in imgUrls" :key="key"><image :src="img" /></swiper-item>
        </swiper>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title">
                <view>本示例为导航栏带搜索框完整功能演示，主要演示有：</view>
                <view>1. 导航栏为 transparent 模式，向上滑动页面，导航栏会从透明变为实色。</view>
                <view>2. 点击搜索框跳转到搜索页面。</view>
                <view>3. 点击导航栏右侧按钮实现关联操作。</view>
                <view>4. 搜索页面为提示词搜索，输入内容实时显示关联词。</view>
                <view>5. 搜索结果根据搜索内容高亮显示文字。</view>
                <view>6. 点击搜索列表或者软键盘搜索按钮，会将结果保存到搜索历史列表。</view>
                <view>7. 点击删除图标，清空历史搜索列表。</view>
                <view>Tips </view>
                <view>1. 本示例目前仅支持 App 端</view>
                <view>2. 所有示例均为演示使用，具体逻辑需要自己实现。</view>
            </view>
        </view>
        <view style="height: 1000rpx;"></view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            showSwiper: false,
            imgUrls: [
                'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4b60b10-5168-11eb-bd01-97bc1429a9ff.jpg',
                'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1dcfa70-5168-11eb-bd01-97bc1429a9ff.jpg'
            ]
        };
    },
    /**
     * 当 searchInput 配置 disabled 为 true 时触发
     */
    onNavigationBarSearchInputClicked(e) {
        console.log('事件执行了')
        uni.navigateTo({
            url: '/pages/template/nav-search-input/detail/detail'
        });
    },
    /**
     *  点击导航栏 buttons 时触发
     */
    onNavigationBarButtonTap() {
        uni.showModal({
            title: '提示',
            content: '用户点击了功能按钮，这里仅做展示。',
            success: res => {
                if (res.confirm) {
                    console.log('用户点击了确定');
                }
            }
        });
    }
};
</script>
<style>
image,
swiper,
.img-view {
    width: 750rpx;
    width: 100%;
    height: 500rpx;
}
.page-section-title {
    margin-top: 50rpx;
}
</style>

详情页：

<template>
    <view class="wrapper">
        <view v-if="isHistory" class="history-box">
            <view v-if="historyList.length > 0">
                <view class="history-title">
                    <text>搜索历史</text>
                    <text class="uni-icon uni-icon-trash" @click="clearSearch"></text>
                </view>
                <view class="history-content">
                    <view class="history-item" v-for="(item, index) in historyList" :key="index">
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <view v-else class="no-data">您还没有历史记录</view>
        </view>
        <view v-else class="history-box">
            <view v-if="historyList.length > 0" class="history-list-box">
                <view
                    class="history-list-item"
                    v-for="(item, index) in historyList"
                    :key="index"
                    @click="listTap(item)"
                >
                    <rich-text :nodes="item.nameNodes"></rich-text>
                </view>
            </view>
            <view v-else class="no-data">没有搜索到相关内容</view>
        </view>
    </view>
</template>
<script>
import util from '@/components/amap-wx/js/util.js';
export default {
    data() {
        return {
            historyList: [],
            isHistory: true,
            list: [],
            flng: true,
            timer: null
        };
    },
    onLoad() {
        // 本示例用的是高德 sdk ，请根据具体需求换成自己的服务器接口。
        this.amapPlugin = util.mapInit();
        this.historyList = uni.getStorageSync('search:history');
    },
    methods: {
        /**
         * 列表点击
         */
        listTap(item) {
            item = JSON.parse(JSON.stringify(item));
            // 如果当前是历史搜索页面 ，那么点击不储存,直接 跳转
            if (this.history) {
                return;
            } else {
                this.isHistory = true;
                // 去做一些相关搜索功能 ，这里直接返回到上一个页面
                // 点击列表存储搜索数据
                util.setHistory(item);
                uni.navigateBack();
            }
        },
        /**
         * 清理历史搜索数据
         */
        clearSearch() {
            uni.showModal({
                title: '提示',
                content: '是否清理全部搜索历史？该操作不可逆。',
                success: res => {
                    if (res.confirm) {
                        this.historyList = util.removeHistory();
                    }
                }
            });
        },
        /**
         * 关键字搜索
         * 调用高德地图关键字搜索api
         */
        getInputtips(val) {
            let _this = this;
            this.amapPlugin.getInputtips({
                keywords: val,
                city: '北京',
                success: data => {
                    let dataObj = data.tips;
                    // 处理返回数据文字高亮
                    dataObj.map(item => {
                        return util.dataHandle(item, val);
                    });
                    //成功回调
                    _this.historyList = dataObj;
                },
                fail: info => {
                    //失败回调
                    console.log(info);
                }
            });
        }
    },
    /**
     * 当 searchInput 输入时触发
     */
    onNavigationBarSearchInputChanged(e) {
        let text = e.text;
        if (!text) {
            this.isHistory = true;
            this.historyList = [];
            this.historyList = uni.getStorageSync('search:history');
            return;
        } else {
            this.isHistory = false;
            this.getInputtips(text);
        }
    },
    /**
     * 点击软键盘搜索按键触发
     */
    onNavigationBarSearchInputConfirmed(e) {
        let text = e.text;
        if (!text) {
            this.isHistory = true;
            this.historyList = [];
            this.historyList = uni.getStorageSync('search:history');
            uni.showModal({
                title: '提示',
                content: '请输入内容。',
                success: res => {
                    if (res.confirm) {
                    }
                }
            });
            return;
        } else {
            uni.showModal({
                title: '提示',
                content: `您输入的内容为"${text}",如果点击确定,将记录到历史搜索,并返回.如果取消不做操作`,
                success: res => {
                    if (res.confirm) {
                        util.setHistory(text);
                        uni.navigateBack();
                    }
                }
            });
        }
    },
    /**
     *  点击导航栏 buttons 时触发
     */
    onNavigationBarButtonTap() {
        uni.showModal({
            title: '提示',
            content: '点击确定，修改输入框的内容为abc',
            success: res => {
                if (res.confirm) {
                    const currentWebview = this.$mp.page.$getAppWebview();
                    currentWebview.setTitleNViewSearchInputText("abc");
                }
            }
        });
    }
};
</script>
<style>
.history-title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    padding-bottom: 0;
    font-size: 34rpx;
    color: #333;
}
.history-title .uni-icon {
    font-size: 40rpx;
}
.history-content {
    display: flex;
    flex-wrap: wrap;
    padding: 15rpx;
}
.history-item {
    padding: 4rpx 35rpx;
    border: 1px #f1f1f1 solid;
    background: #fff;
    border-radius: 50rpx;
    margin: 12rpx 10rpx;
    color: #999;
}
.history-list-box {
    /* margin: 10rpx 0; */
}
.history-list-item {
    padding: 30rpx 0;
    margin-left: 30rpx;
    border-bottom: 1px #EEEEEE solid;
    font-size: 28rpx;
}
.no-data {
    text-align: center;
    color: #999;
    margin: 100rpx;
}
</style>

页面配置：

{
                    "path": "nav-search-input/nav-search-input",
                    "style": {
                        "navigationBarTitleText": "导航栏带搜索框",
                        "app-plus": {
                            "titleNView": {
                                "type": "transparent",
                                "titleColor": "#fff",
                                "backgroundColor": "#007AFF",
                                "buttons": [{
                                    "fontSrc": "/static/uni.ttf",
                                    "text": "\ue537",
                                    "width": "40px",
                                    "fontSize": "28px",
                                    "color": "#fff",
                                    "background": "rgba(0,0,0,0)"
                                }],
                                "searchInput": {
                                    "backgroundColor": "#fff",
                                    "borderRadius": "6px",
                                    "placeholder": "请输入地址 如：大钟寺",
                                    "disabled": true
                                }
                            }
                        }
                    }
                }