【035】搜索页开发（上）

页面生命周期~官方文档 https://uniapp.dcloud.io/frame?id=页面生命周期
可以在其中找到onNavigationBarSearchInputClicked这个页面生命周期函数，用于监听原生标题栏输入框点击事件

navigateto~官方文档 https://uniapp.dcloud.io/api/router?id=navigateto
可以在其中找到页面跳转的相关APi

navigateback~官方文档 https://uniapp.dcloud.io/api/router?id=navigateback
可以在其中找到页面跳转返回的相关APi

页面跳转返回按钮~官方文档 http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

开发内容

首页和搜索页之间的跳转
搜索页标题栏样式
搜索页取消按钮返回的实现

具体方法

通过页面生命周期函数onNavigationBarSearchInputClicked监听搜索框的点击事件，触发了点击事件之后使用uni.navigateTo进行页面跳转
在pages.json中配置搜索页的标题栏样式，因为和首页的标题栏很相似，所以可以将首页的一些样式复制下来稍微调整一下
通过页面生命周期函数onNavigationBarButtonTap监听原生标题栏按钮点击事件，通过其中的默认参数e的属性e.index可以确定按下的按钮的下标，然后当点击“取消”按钮时通过uni.navigateBack进行返回（这里只需要返回1层）

核心代码

index.vue文件

<template><view><!-- ...... --><!-- ...... --><!-- ...... --></view>
</template><script>//......export default {//......// 监听搜索框点击事件onNavigationBarSearchInputClicked() {uni.navigateTo({url: '../search/search'});},//......}
</script><style></style>

search.vue文件

<template><view></view>
</template><script>export default {data() {return {}},// 监听愿生标题导航按钮点击时间onNavigationBarButtonTap(e) {// console.log(JSON.stringify(e));// 向上返回一级if (e.index === 0) {uni.navigateBack({delta: 1});}},methods: {}}
</script><style></style>

pages.json文件

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages//......{"path" : "pages/search/search","style" : {"app-plus": {"scrollIndicator":"none","titleNView": {"autoBackButton": false,"searchInput": {"align": "left","backgroundColor": "#F7F7F7","borderRadius": "4px","placeholder": "搜索糗事","disabled": "false"},"buttons": [{"color": "#000000","colorPressed": "#BBBBBB","float": "right","fontSize": "16px","text": "取消"}]}}}}//......],//......
}

【036】搜索页开发（下）

页面生命周期~官方文档 https://uniapp.dcloud.io/frame?id=页面生命周期

可以在其中找到onNavigationBarSearchInputChanged这个页面生命周期函数，用于监听原生标题栏搜索输入框输入内容变化事件
可以在其中找到onNavigationBarSearchInputConfirmed这个页面生命周期函数，用于监听原生标题栏输入框搜索事件

开发内容

为搜索框的【输入变化】、【确认搜索】的两个事件提供一个“接口”，以后实现

具体方法

用onNavigationBarSearchInputChanged和onNavigationBarSearchInputConfirmed这两个页面生命周期函数来进行相关的实现，通过console.log(JSON.stringify(e))查看相关的内容，发现这两个函数的参数对象e都只有属性text，暂时先将e.text进行打印，当做是一个“接口”

核心代码

search.vue文件

<template><view></view>
</template><script>export default {//......// 监听搜索框文本变化onNavigationBarSearchInputChanged(e) {// console.log("监听搜索框文本变化" + JSON.stringify(e));// 通过上面的调试观察，可以发现，对象里只有一个属性textconsole.log(e.text);},// 监听搜索框点击搜索按钮事件onNavigationBarSearchInputConfirmed(e) {// console.log("监听搜索框点击搜索按钮事件" + JSON.stringify(e));// 通过上面的调试观察，可以发现，对象里只有一个属性textconsole.log(e.text);},//......}
</script><style></style>

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】相关推荐

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·008【首页开发】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [024]page-json配置 [025]图文.视 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·000【前言】
前言本系列笔记,基于曾经的网易云课堂上一个"uni-app仿糗事百科"开发的课程,课程的资源来自网络. 我仅做一些笔记,来记录学习的一些收获. 前8节课讲的都是一些软件的基础使用 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·006【底部导航开发】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [013]底部导航开发 [013]底部导航开发官方 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·005【设置全局属性globalStyle】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [012]设置全局样式globestyle [012 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·004【App.vue引入全局公共样式】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [009]引入官方CSS样式库 [010]引入第三方 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用常见的尺 ...
高仿糗事百科学习(三)NET
高仿糗事百科,是一个典型的cs模式,所以我们获取数据就要通过net,今天我就开始书写关于网络连接方面的书写. 在安卓中,我们将联网请求往往是放在次线程中,如果放在主线程中,将会导致主线程要处理事件太多 ...
uniapp实战项目仿糗事百科_项目设计最好用的底层思考模型——黄金圈
为什么要学习黄金圈法则如何学习黄金圈法则学习黄金圈法则哪些内容彩蛋全文共计2200字,10张图片I阅读13分钟为什么要学习黄金圈法则在工作中和生活中,你是否遇到过以下的困惑: 1-老板突然 ...
最新uni-app实战仿糗事百科app开发教程完整版
课程概述: 本季度为uni-app实战项目第一季度,将实战开发仿糗事百科app,其中会包括发布到安卓端app,IOS端app.微信小程序和支付宝小程序. 章节1项目介绍(买前必看) 课时1项目介绍(买 ...

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】

文章目录

【035】搜索页开发（上）

开发内容

具体方法

核心代码

【036】搜索页开发（下）

开发内容

具体方法

核心代码

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】相关推荐

最新文章

热门文章