uniApp学习(8)搜索框的创建和自动获取焦点
1、跳转到搜索页面功能点击搜索跳转,显示热门搜索和,搜索历史结果如下所示1、创建搜索页search.vue配置pages.json页面配置app-plus导航搜索页面(这个只针对h5和APP有用){"path": "pages/search/search","style": {"navigationBarTitleText": "","app-plus": {"bounce": "none", /
1、跳转到搜索页面功能
点击搜索跳转,显示热门搜索和,搜索历史
结果如下所示
1、创建搜索页search.vue
配置pages.json页面配置app-plus导航搜索页面(这个只针对h5和APP有用)
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"bounce": "none", //关闭回弹效果
"titleNView": {
"softinputNavBar":"none",
"autoBackButton": false, //隐藏左侧后退按钮(APP)
"searchInput": {
"align": "left",
"placeholder": "搜索你想要的内容",
"borderRadius": "30rpx",
"backgroundColor": "#f0f1f2"
},
"buttons": [{
"float": "right",
"text": "取消",
"fontSize": "16",
"color": "#2A333B"
}]
}
}
}
效果如下所示
2、小程序从index.vue跳转到search.vue的方法
在首页index.vue中的添加 @click.native=“navTo(’/pages/search/search’)”
<template>
<view >
<!-- #ifdef MP -->
<!-- 搜索框在小程序中显示 -->
<search-input @click.native="navTo('/pages/search/search')"></search-input>
<!-- #endif -->
</view>
</template>
3、App跳转到search.vue的方法
onNavigationBarSearchInputClicked这个是App端监听输入框被点击时候触发的方法,直接在index.vue下面添加,与methods同级
// this.navTo因为mixin.js在main.js中全局引入
// 采用this 因为是在当前的Vue实例里面的
onNavigationBarSearchInputClicked() {
// console.log("-------")
// uni.navigateTo({
// url:'/pages/search/search'
// })
this.navTo('/pages/search/search')
},
navTo是全局引入的方法
navTo(url, options={}){
if(!url){
return;
}
if(options.login && !this.$store.getters.hasLogin){
url = '/pages/auth/login';
}
uni.navigateTo({
url
})
},
4、在在category.vue 分类页面进入搜索页面的方法
onNavigationBarButtonTap监听原生导航按钮点击的方法
// 监听原生导航按钮事件
onNavigationBarButtonTap(e) {
// 搜索按钮
if(e.index === 0) {
// 在 /common/mixin/mixin.js 中定义了
this.navTo('/pages/search/search')
}
},`
5、category.vue 标签名进入搜索页面,methods 选项的 clickLabel 实现跳转
// 点击标签,跳转搜索页面
clickLabel(item) {
// 注意:labelId放到第1个位置,后面解析时要用,顺序一定不能乱
// activeIndex 选中分类下标,方便父组件重新选择分类时,默认选中当前分类
const params = { labelId: item.id, name: item.name, activeIndex:this.activeIndex}
uni.navigateTo({
url: `/pages/search/search?params=${ JSON.stringify(params) }`
})
}
2、在search.vue加载页面onload中接收参数,如果传递过来有值,说明来自
没有值说明来自index输入框或者查询按钮,则需要获取焦点
onLoad(option) {
// #ifdef APP-PLUS
//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用 plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview = this.$scope.$getAppWebview();
// #endif
// 如果有参数则不用自动获取焦点
if (option.param) {
console.log("option", JSON.parse(option.param))
this.param = JSON.parse(option.param)
this.doSearch()
}
// 没有参数则自动获取焦点
else {
// #ifdef APP-PLUS
console.log("自动获取焦点")
currentWebview.setTitleNViewSearchInputFocus(true)
// #endif
// #ifdef MP
// 小程序获取焦点
this.focus = true
// #endif
}
},
3、兼容小程序搜索框
- 创建官方提供的模板项目,点击HuilderX菜单栏的:文件》新建》项目,打开新建项目窗口,如下操作:
- 拷贝 hello-uni-app 项目中的 /components/uni-search-bar/uni-search-bar.vue 搜索组件到我们项目中。
- 将 uni-search-bar.vue 图标相关的注释掉,替换 text 标签以类名方式引入对应图标,可在 css 中将边框去
除和高度调整。
在 search.vue 中引用 uni-search-bar.vue 组件
注意:
如果组件是在 /components 目录下,且 /components 的子目录名和组件名相同时,可以不需要
import 导入它。
如上面 uni-search-bar.vue 目录结构即可省略 import ,直接在模板代码中使用这个组件即可。
doSearch(obj)方法,添加 obj 参数,接收一个输入框的数据对象 {value: ‘xxxx’}
下面的就是小程序显示的搜索框和取消
<template>
<view class="search-container">
<!-- #ifdef MP -->
<!-- 小程序搜索框, 不要少了 ref="searchBar" 后面要用 -->
<!-- 注意:navBack() 不要少了括号,不然后退不了(mixin.js定义了) -->
<uni-search-bar ref="searchBar" radius="100" placeholder="搜索你想要的内容"
clearButton="auto"
cancelButton="always" @confirm="doSearch" @cancel="navBack()" />
<!-- #endif -->
</view>
</template>
小程序uni-search-bar 采用this.$emit方式向父组件传递输入框的值
this.$emit("confirm", {
value: this.searchVal
})
@confirm="doSearch"调用父组件doSearch的方法
<script>
// 当前页面实例变量,声明外面提高性能
let currentWebview = null
export default {
data() {
return {
params: null, // 其他页面跳转到此页面带上的参数,
content: null, //搜索内容
}
},
//...,
methods() {
// 搜索
doSearch(obj) {
// obj有数据,则获取
this.content = obj && obj.value ? obj.value : this.content
console.log(this.content)
uni.showLoading()
},
},
}
</script>
4、小程序搜索框自动获取焦点
- 小程序进入搜索页面,搜索框自动获取焦点。
实现此功能,要在 uni-search-bar.vue 的 props 声明 focus 属性,并添加针对 focus 添加一个监听器来设
置焦点
props: {
focus: { // 是否获取焦点 +++
type: Boolean,
default: false
},
},
watch: {
// 设置焦点 ++++
focus: {
handler(newVal) {
if (newVal) {
// 获取焦点,
this.searchClick()
}
},
immediate: true
},
},
- 修改 search.vue 页面中的传递获取焦点属性: focus = “focus”,data 选项中声明 focus 属性, onLoad赋值中赋值true真机预览才有效果…
当onload 没有参数则ifdef MP中小程序判断,设置focus为true触发焦点
<template>
</template>
<!-- focus 是否获取焦点 -->
<uni-search-bar :focus="focus" radius="100" placeholder="搜索你想要的内容" clearButton="auto" cancelButton="always" @confirm="doSearch"
@cancel="navBack()" />
<script>
data() {
return {
params: null, // 其他页面跳转到此页面带上的参数,
content: null, //搜索内容
focus: false, //搜索框获取焦点
}
},
onLoad(option) { // option接收其他页面传递过来的参数
// #ifdef APP-PLUS
currentWebview = this.$mp.page.$getAppWebview()
// #endif
// 获取其他页面跳转过来带的参数,
if (option.params) {
// 转换对象
this.params = JSON.parse(option.params)
console.log('params', this.params)
// 有参数,则开始搜索
this.doSearch()
} else {
// #ifdef APP-PLUS
//点击搜索框获取焦点, 因为分类页会跳转到此页面后不用获取焦点,所以不在pages.json
中开启自动获取焦点
currentWebview.setTitleNViewSearchInputFocus(true)
热门与历史关键字提示组件
1. 需求: 进入搜索页面后, 显示热门搜索和历史搜索关键字, 带历史搜索带清空按钮, 如下图
2. 创建 / pages / search / components / keyword.vue 关键词页面, 其中模板代码如下
// #endif
// #ifdef MP
// 页面加载即获取焦点,真机测试才有效 +++
this.focus = true
// #endif
}
},
</script>
<style>
</style>
更多推荐
所有评论(0)