黑马程序员-微信小程序-原生框架——购物平台-分类页面

黑马程序员视频教程 

目录

黑马程序员视频教程 

分类页面 

一.获取分类数据

 二.渲染分类页面​​​​​​​

三.使用缓存技术

四.优化接口代码

---

分类页面 

一.获取分类数据

1.在分类页面.js中引入request方法

2.定义三个空数组，用来分别存放两侧的数据和接口返回来的数据

3.定义一个函数，用来发起数据请求，将请求到到数据赋值给Cates数组

（4）调用函数

 二.渲染分类页面

2.1搜索框

（1）在分类页面的.json中设置标题并声明SearchInput组件

（2）使用SearchInput组件

效果：

2.2内容区域

scroll-view文档

2.2.1整体结构

（1）设置内容整体结构

 （2）添加样式

  

效果：

2.2.2左侧菜单

 （1）渲染左侧菜单

 （2）左侧菜单样式

效果;

2.2.3右侧区域

（1） 渲染右侧商品内容

（2）右侧样式

 

效果：

 2.2.4激活选中效果

 （1）左侧菜单激活选中效果

 （2）在分类页面.js中创建currentIndex，用来存放被点击的左侧菜单的索引

（3） 在分类页面的wxml中判断索引是否等于currentIndex，等于则添加active类 

效果：

 （4）添加点击事件，实现点击不同标题，选中不同标题效果

（5）在分类页面的.js中定义handItemTap函数

 效果：

2.2.5 点击菜单，右侧列表置顶

（1）在分类页面wxml中给右侧scroll-view添加scroll-top属性 ，绑定一个变量

（2）在分类页面的.js的data中定义scrollTop变量，赋值为0

（3）点击菜单，将右侧列表置顶，所以我们要在handItemTap函数中将scrollTop重新设置为0，

 效果：

点击一个菜单，右侧滚动条拉到最下面

 再点击一个菜单

三.使用缓存技术

 为什么使用缓存技术，因为接口返回的数据量太大了

思路： 打开页面的时候，先做判断，判断本地存储中有没有旧的数据，没有则发送新的请求，来获取新的数据，假如有旧的数据，并且旧的数据没有过期，那我们就使用本地存储的旧数据。

   web中的本地存储和小程序中的本地存储的区别：

  1.写代码的方式不一样

        web：localStorage.setItem("key","value")    localStorage.getItem("key")

        小程序中：wx.setStorageSync('key', data); wx.getStorageSync("key")

 2.存的时候 有没有做类型转换

        web：不管存入的是什么类型的数据，最终都会先调用一下toString(),把数据变成了字符串再                    存进去

        小程序：不存在类型转换的这个操作 存什么类型的数据进去，获取的时候就是上面类型     

（1）在分类页面的.js的getCates函数中将接口的数据存入到本地

（2） 在分类页面的.js的onLoad函数中判断本地存储中有没有旧的数据，从而调用getCates函数请求数据

四.优化接口代码

1.提取接口公共部分

（1）在request的index.js文件中定义公共的url

（2）调用接口时

 效果：