目录
黑马程序员视频教程
分类页面
一.获取分类数据
二.渲染分类页面
三.使用缓存技术
四.优化接口代码
分类页面 一.获取分类数据
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)调用接口时
效果:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)