一,搭建搜索框架

7282e4b1cba3408380429629ed113cc6.png

首先需要写一个输入框

我们在主页上添加一个点击搜索就跳转,同时我们跳转到搜索页面之后 会有一个返回按钮

在搜索栏用v-model="userName"绑定

placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数

methods: {
         sou () {
			uni.navigateTo({
			             url:'/pages/sousuo/sousuo?username=' + this.userName
			                }) //由搜索页传递到搜索结果页
			          uniCloud.database().collection('接口').get().then(res =>{
			                    this.userName = ''
			                    console.log(res);
			            })
			        }

在搜索结果页面接收数据

data() {
            return {
                dataList:[],   //展示数据
            }
        },
//搜索结果页接受
        onLoad(value) {
            if(!value) return
                this.getSearch(value) 
            
            
        },
methods: {
          // value自动接收输入框中的内容
             getSearch(value) {
			     //调用接口数据
			      uniCloud.database().collection('接口').get().then(res => {
			      this.dataList = res.result.data.filter(item => {
			             if(item.username == value.username) {
			                  console.log(item.username);
			                  return true
			                }
						)
			        })
			 }   

模糊查询可用js里的方法 indexOf

getSearch(value) {
				uniCloud.database().collection('接口').get().then(res => {
					res.result.data.forEach(item => {
						if(item.username.indexOf(value.username) > -1) {
							this.dataList.push(item)
						})
					})
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐