1.1 页面布局
首先创建cate的分支
定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll
这个组件如果是y scroll那就要固定高度,x scroll那就要固定宽度
这里有个问题就是,我们应该把高度限定在整个屏幕高度
这里用到uniapp一个api uni.getSystemInfoSync()他可以获得很多信息,比如该手机型号、以及平台、还有整个屏幕宽高以及内容区域宽高等
1.2 一级分类
先获取数据
然后开始渲染
注意block类似于template不占用空间组件
然后动态active的变化
注意如果是多个class使用数组包起来
然后点击事件
1.3 二三级分类
二三级分类是跟着一级分类一起来的数据,所以可以在一开始就接收第一个active的数据,再通过改变active的点击事件来切换列表
然后就可以渲染到页面
二级分类就出来了
三级分类直接渲染即可
1.4 重置滚动条,跳转分包
现在的页面是有一个bug的
当我们浏览一半到这里再次点击一级分类,会发现还是在这个位置,有点类似于路由的滚动行为
这里的解决思路是 scroll组件有一个属性scroll-top 可以定位到竖向滚动条的位置
但是这样并不会生效,因为我们的scrollTop始终没变过,所以你给他赋值0,他发现他本来就是0就不会有赋值的操作,页面也就响应不到
然后点击三级分类每一项跳转到分包商品详情页去
注意tabBar是用switchTap来跳,分包非tabBar页面使用navigateTo来跳
1.5 分支合并提交
主要就是记住分支暂存提交推送后,到主分支要先暂存提交,再合并,再来推送
二.搜索
先创建search分支
2.1 自定义搜索组件
uni创建自定义组件
在 uni-modules新建插件
而且不用注册,直接在页面使用即可
该效果本质上是在这里展示用的,当一点击回调往真正的搜索页面
这里如果要把我们的背景颜色和边框圆角弄成动态的,其实就是vue的props
回忆一下对象写法
用在组件上,注意属性名和值都要加引号
注意一下uni提供了一些组件,uniui在官方文档上
接下来回顾一下自定义事件,也就是我们怎么让页面点击这个组件我们跳转到搜索页面
绑定自定义事件
组件通过emit,规定触发的时机以及发送数据
2.1.1 导航跳转与吸顶效果
首先导航跳转
先创建一个分包
然后跳转非tabBar用navigateTO
然后再home页面也需要一个
但是在这个页面就出现了问题,会跟着页面飘起走
之所以cate页面没出现是因为它是用的scroll组件,他有滚动条,超出了就滚动条往下走了,所以search组件就可以一直在那里,但是还需要完善一下
用我们之前cate计算出来的高度减去search组件的高度
然后解决首页这个问题,将它设置为sticky定位即可
2.2 搜索建议
搜索页面的基本结构,这里有用到一个uni的组件有专门的搜索栏search-bar
然后将取消按钮删除,去掉一些不必要的事件
要修改背景颜色要去这个组件内部去修改
然后要让他一进来就获取焦点也是在内部去改,将两个都改为true
该组件的input事件会受到参数e也就是输入的值
很明显这里要做一个防抖处理
2.2.1 根据关键词搜索列表
这里的思路是这样的,在防抖里面调用一个获取搜索列表的函数,在这个函数里面应该先判断一下kw也就是输入的关键词是否是空,如果为空就让列表为空并退出循环否则就正常走,发起请求并给到数组
,
然后渲染到页面上
同时跳转到商品详情页面
2.3 搜索历史
先定义好ui结构
来点假数据
然后搜索建议列表和搜索历史应该条件渲染
2.3.1 搜索历史列表处理
同样还是input事件
但是有两个问题
一个是最新搜索的应该放在前面:
这里不改变push的用法的前提下,需要用计算节点来做,因为reverse会改变原数组,容易出差错,而且要浅拷贝一下也是怕把原数组改变到了
还有一个问题就是我们搜重复的会显示两个在上面:
这样做虽然可以去重操作,但是有一个问题 就是我们如果已经搜索了一个a,在最后面,在搜索一次a,虽然不会上去重复的,但是这个时候a应该在最前面去这样做的话这个a还是在最后面
其原因是因为原本结构是这样
页面呈现是这样
这个时候你输入a,先push进去,然后set发现重复,就直接删除了新进来的这个a,相当于没有变化,所以也不会引起计算属性reverse的变化,也就导致了你就算搜了一次a他也没有到最前面来
正确的做法应该这样
去掉我们原来的push,当我们input之后先创建一个set结构,用她的delete方法删除原来的,在add添加新的,这样结构也就变了,就算有重复的也会被删去重复的,而且最重要的是,新搜索的会在前面
持久化存储搜索建议列表
大体思路是在我们存储进historyList的时候变成json字符串也保存进storage,用到uni的一个api uni.setStorageSync
然后在onload生命钩子中去获取,注意要考虑没有的情况,就为一个空的字符串数组
2.3.2 清空搜索历史记录
绑定事件
需要将列表清空,同时记得移除storage里面的数据