例子位置：  源码： ``` <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 } } } } } ```