首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
uni-app标题导航栏官方例子
2807
人阅读
2022/2/15 13:55
总访问:
879106
评论:
0
收藏:
0
手机
分类:
移动开发
例子位置: ![](https://img.tnblog.net/arcimg/xiuxin/aa7a10d44d544e85a4cf827a86678f0c.png) 源码: ``` <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 } } } } } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}