10-小程序(做搜索页面,里面有历史记录,计算属性setter的基本使用)

最新推荐文章于 2023-10-13 21:05:03 发布

大力99

最新推荐文章于 2023-10-13 21:05:03 发布

阅读量389

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/Tangoneone/article/details/107213801

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

01.搜索页面-页面分析&静态页面

在这里插入图片描述

入口: 首页或者分类搜索链接点击跳转的
主要模块
1. searchBar
2. 历史搜索列表
其他说明
1. 输入框输入内容inputVal，点击键盘右下角按钮时，跳转搜索列表，按inputVal搜索
2. 点击历史搜索项时，也会跳转搜索列表，按这一项的值搜索
3. 第1，2步，inputVal会加入到历史搜索的头部，并去重
4. 点击x清空历史搜索
5. 历史搜索列表存储在小程序数据缓存
6. 在搜索列表页面，输入内容触发搜索也应该把输入内容添加到历史搜索列表中

02.搜索页面-跳转搜索列表页面

输入框输入内容，点击键盘右下角按钮，跳转到搜索列表页面
1. 使用子传父
  1. 子里面已经$emit一个事件search
  2. 在search页面，使用子组件的dom注册search事件
    1. @search:toSearchList
    2. 跳转页面uni.navigateTo

03.搜索页面-触发搜索

跳转到搜索列表页面，按照SearchBar的输入内容进行搜索
1. toSearchList，获取到inputVal
2. 跳转传递参数?catName=inputVal

04.搜索页面-添加搜索关键字

历史搜索列表展示
1. 在data属性中声明historyList
2. kwList的初始化，从storage取
3. 历史搜索列表在storage存储的key值history
  1. 作为常量HISTORY_KEY
上面步骤的输入内容要添加到历史搜索列表，插入到前面，并去重
1. toSearchList方法里面inputVal插入historyList里面
  1. 方案1：
    1. unshift+ Set去重
    2. …展示运算符插入到前面+ Set去重
2. 发现问题：
  1. 重启小程序历史搜索丢失
  2. 方案：历史搜索的改变应该存在storage里面

注意点：

uni.getStorageSync(不存在的key)返回值是空字符串

05.搜索页面-先跳转后添加搜索关键字

方案
1. 跳转在前面，改变data属性放在后面
  1. 跳转有动画，所以看到效果依然是先添加后跳转
2. setTimeout0
  1. 不解决问题
3. 先跳转，页面onHide/onShow里面historyList同步storage
  1. toSearchList逻辑
    1. 添加关键字缓存到storage
    2. 跳转
  2. onHide也是在刚开始跳转后就执行的，因为跳转有动画（x）
  3. 考虑onShow
4. 优化
  1. onShow 从搜索列表返回时执行，而且页面初始化时也会执行
  2. storage=>data属性逻辑, 在data()有，有onShow也有
  3. 所以storage=>data属性逻辑统一放在onShow

注意点：

setTimeout0在同步代码后执行，不要使用setTimeout(func,50)
1. 因为50这个数字是不确定，可能会和手机的性能有关

06.搜索页面-点击历史搜索

点击历史搜索项时，跳转搜索列表页面，按点击项的值进行搜索
1. 逻辑很像toSearchList
2. 点击@click:toSearch(点击项的值)
3. 观察运行效果，然后分析代码的执行
4. 结论：完全可以使用toSearchList

07.搜索页面-清空历史搜索

点击x，弹框确认，如果用户确认，清空历史搜索
1. 点击x，@click:clearHistory
2. 逻辑
  1. 重置data.属性
  2. storage的histroy的存储也需要清除

08.搜索列表-输入也添加关键字

搜索列表的输入也添加到历史搜索

方案
1. 统一在子组件SearchBar中加入历史搜索，另外在搜索页面点击历史搜索项需要单独
2. 关键字加入历史搜索统一在搜索列表页面处理
  1. 搜索页面输入
  2. 搜索页面历史搜索点击
  1. 搜索列表页面输入
1. 分类跳转搜索列表页面，关键字也添加到storage
步骤
1. 搜索页面添加关键字到storage统一放到搜索列表，方法名addHistory
2. addHistory
  1. 取storage
  2. 更新
    1. 插入到头部去重
  3. 存回去storage

补充：分类和首页搜索链接跳转到搜索页面

组件里面统一跳转即可

注意点

可以把搜索页面和搜索列表页面合并为一个页面。但是从产品层面来看，两个页面独立也可以。

09.计算属性setter-基本使用

传送门

回顾计算属性getter

概念：计算属性的get方法，就是计算属性的读操作
使用场景：对data属性有复杂的计算

使用：

 computed: {
     // 简化
     // fullName () {
     //   return this.firstName + ' ' + this.lastName
     // }
     // 完整写法
     fullName: {
         get () {
             return this.firstName + ' ' + this.lastName
         }
     }
 }

计算属性setter

概念：计算属性的set方法，就是计算属性修改

使用

当计算属性有变化时会触发set方法
set方法形参就是改变计算属性的值
一般在set方法，修改计算属性的依赖

fullName: {
    get () {
        return this.firstName + ' ' + this.lastName
    },
        set(newValue){
            // 当计算属性有变化是时，会触发set方法
            // console.log(newValue)
            let arr = newValue.split(' ')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
}

应用场景，全选逻辑

10.计算属性setter与全选逻辑

computed: {
    isAll: {
        get () {
            return this.iscss && this.isjs && this.isvue && this.iscss
        },
            set(status){
                // 让全选的依赖属性和它的状态保持一致
                this.iscss=status
                this.isvue=status
                this.isjs=status
                this.ishtml=status
            }
    }
}