步骤:
- 先判断数据是否为空,为空时表明当前数据为空
<div if="{{memoList.length === 0}}"> </div>
- 否则不为空,建立搜索部分和列表部分(在同一个div中)
html
js<div else> 搜索部分 <div><input onchange="goSearch()" placeholder="搜索备忘"/></div> 列表部分 <div for="searchList"> 引入列表组件</div> </div>
定义变量import { getMemoList, setMemoList } from '../helper/data.js' import router from '@system.router'
在当前页面注册并监听事件data() { return { memoList: [], //定义一个备忘数组列表memoList searchList: [] //搜索后展现的列表 } }
构建异步函数onInit() { // $on 在当前页面 注册事件 并 监听此事件 this.$on('showPage', this.refreshList) },
创建搜索功能// 使用async将函数标记为异步操作 // await()会等到异步函数getMemoList调用完成之后直接 返回最终结果给memoList // || [] 表示没有数据时返回空数组,否则会返回null或者undefined,导致页面报错 // 然后在返回给搜索后的列表searchLis async refreshList() { this.memoList = (await getMemoList()) || [] this.searchList = this.memoList; },
goSearch(e) { var value = e.value; //获取源数据 var list = this.memoList; // 查找对比 // filter过滤器 var newData = list.filter(item => { // 根据标题/类型模糊查询(使用 > -1, 使用 == 0 是进行精确查询) //indexOf方法中如果xxx.indexOf("")返回值为0 if (item.title.indexOf(value) > -1 || item.label.indexOf(value) > -1) { return item } return newData }) this.searchList = newData; if (value == "") { this.searchList = list; } },