02 uniapp/微信小程序 项目day02

  • 02 uniapp/微信小程序 项目day02已关闭评论
  • 106 次浏览
  • A+
所属分类:Web前端
摘要

首先创建cate的分支定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll


一.分类

02 uniapp/微信小程序 项目day02

1.1 页面布局

首先创建cate的分支

02 uniapp/微信小程序 项目day02

定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll

这个组件如果是y scroll那就要固定高度,x scroll那就要固定宽度

02 uniapp/微信小程序 项目day02

这里有个问题就是,我们应该把高度限定在整个屏幕高度

这里用到uniapp一个api uni.getSystemInfoSync()他可以获得很多信息,比如该手机型号、以及平台、还有整个屏幕宽高以及内容区域宽高等

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

1.2 一级分类

先获取数据

02 uniapp/微信小程序 项目day02

然后开始渲染

注意block类似于template不占用空间组件

02 uniapp/微信小程序 项目day02

然后动态active的变化

注意如果是多个class使用数组包起来

02 uniapp/微信小程序 项目day02

然后点击事件

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

1.3 二三级分类

二三级分类是跟着一级分类一起来的数据,所以可以在一开始就接收第一个active的数据,再通过改变active的点击事件来切换列表

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

然后就可以渲染到页面

02 uniapp/微信小程序 项目day02

二级分类就出来了

02 uniapp/微信小程序 项目day02

三级分类直接渲染即可

02 uniapp/微信小程序 项目day02

1.4 重置滚动条,跳转分包

现在的页面是有一个bug的

02 uniapp/微信小程序 项目day02

当我们浏览一半到这里再次点击一级分类,会发现还是在这个位置,有点类似于路由的滚动行为

这里的解决思路是 scroll组件有一个属性scroll-top 可以定位到竖向滚动条的位置

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

但是这样并不会生效,因为我们的scrollTop始终没变过,所以你给他赋值0,他发现他本来就是0就不会有赋值的操作,页面也就响应不到

02 uniapp/微信小程序 项目day02

然后点击三级分类每一项跳转到分包商品详情页去

02 uniapp/微信小程序 项目day02

注意tabBar是用switchTap来跳,分包非tabBar页面使用navigateTo来跳

02 uniapp/微信小程序 项目day02

1.5 分支合并提交

主要就是记住分支暂存提交推送后,到主分支要先暂存提交,再合并,再来推送

二.搜索

先创建search分支

02 uniapp/微信小程序 项目day02

2.1 自定义搜索组件

02 uniapp/微信小程序 项目day02

uni创建自定义组件

uni-modules新建插件

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

而且不用注册,直接在页面使用即可

02 uniapp/微信小程序 项目day02

该效果本质上是在这里展示用的,当一点击回调往真正的搜索页面

02 uniapp/微信小程序 项目day02

这里如果要把我们的背景颜色和边框圆角弄成动态的,其实就是vue的props

回忆一下对象写法

02 uniapp/微信小程序 项目day02

用在组件上,注意属性名和值都要加引号

注意一下uni提供了一些组件,uniui在官方文档上

02 uniapp/微信小程序 项目day02

接下来回顾一下自定义事件,也就是我们怎么让页面点击这个组件我们跳转到搜索页面

绑定自定义事件

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

组件通过emit,规定触发的时机以及发送数据

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

2.1.1 导航跳转与吸顶效果

首先导航跳转

先创建一个分包

02 uniapp/微信小程序 项目day02

然后跳转非tabBar用navigateTO

02 uniapp/微信小程序 项目day02

然后再home页面也需要一个

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

但是在这个页面就出现了问题,会跟着页面飘起走

02 uniapp/微信小程序 项目day02

之所以cate页面没出现是因为它是用的scroll组件,他有滚动条,超出了就滚动条往下走了,所以search组件就可以一直在那里,但是还需要完善一下

用我们之前cate计算出来的高度减去search组件的高度

02 uniapp/微信小程序 项目day02

然后解决首页这个问题,将它设置为sticky定位即可

02 uniapp/微信小程序 项目day02

2.2 搜索建议

搜索页面的基本结构,这里有用到一个uni的组件有专门的搜索栏search-bar

02 uniapp/微信小程序 项目day02

然后将取消按钮删除,去掉一些不必要的事件

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

要修改背景颜色要去这个组件内部去修改

02 uniapp/微信小程序 项目day02

然后要让他一进来就获取焦点也是在内部去改,将两个都改为true

02 uniapp/微信小程序 项目day02

该组件的input事件会受到参数e也就是输入的值

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

很明显这里要做一个防抖处理

02 uniapp/微信小程序 项目day02

2.2.1 根据关键词搜索列表

这里的思路是这样的,在防抖里面调用一个获取搜索列表的函数,在这个函数里面应该先判断一下kw也就是输入的关键词是否是空,如果为空就让列表为空并退出循环否则就正常走,发起请求并给到数组

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

然后渲染到页面上

02 uniapp/微信小程序 项目day02

同时跳转到商品详情页面

02 uniapp/微信小程序 项目day02

2.3 搜索历史

先定义好ui结构

02 uniapp/微信小程序 项目day02

来点假数据

02 uniapp/微信小程序 项目day02

然后搜索建议列表和搜索历史应该条件渲染

02 uniapp/微信小程序 项目day02

02 uniapp/微信小程序 项目day02

2.3.1 搜索历史列表处理

同样还是input事件

02 uniapp/微信小程序 项目day02

但是有两个问题

02 uniapp/微信小程序 项目day02

一个是最新搜索的应该放在前面:

这里不改变push的用法的前提下,需要用计算节点来做,因为reverse会改变原数组,容易出差错,而且要浅拷贝一下也是怕把原数组改变到了

02 uniapp/微信小程序 项目day02

还有一个问题就是我们搜重复的会显示两个在上面:

02 uniapp/微信小程序 项目day02

这样做虽然可以去重操作,但是有一个问题 就是我们如果已经搜索了一个a,在最后面,在搜索一次a,虽然不会上去重复的,但是这个时候a应该在最前面去这样做的话这个a还是在最后面

其原因是因为原本结构是这样

02 uniapp/微信小程序 项目day02

页面呈现是这样

02 uniapp/微信小程序 项目day02

这个时候你输入a,先push进去,然后set发现重复,就直接删除了新进来的这个a,相当于没有变化,所以也不会引起计算属性reverse的变化,也就导致了你就算搜了一次a他也没有到最前面来

正确的做法应该这样

去掉我们原来的push,当我们input之后先创建一个set结构,用她的delete方法删除原来的,在add添加新的,这样结构也就变了,就算有重复的也会被删去重复的,而且最重要的是,新搜索的会在前面

02 uniapp/微信小程序 项目day02

持久化存储搜索建议列表

大体思路是在我们存储进historyList的时候变成json字符串也保存进storage,用到uni的一个api uni.setStorageSync

02 uniapp/微信小程序 项目day02

然后在onload生命钩子中去获取,注意要考虑没有的情况,就为一个空的字符串数组

02 uniapp/微信小程序 项目day02

2.3.2 清空搜索历史记录

绑定事件

02 uniapp/微信小程序 项目day02

需要将列表清空,同时记得移除storage里面的数据

02 uniapp/微信小程序 项目day02

2.3.3 点击搜索历史跳转

02 uniapp/微信小程序 项目day02