分类页
左右布局
注意项: 左右标签用flex布局, 因为内容超过视口高度, 要分别设置overflow: auto;, 才能有分别滚动的效果
如果不加的话: 1. 背景色只有一屏 2. 没有滚动条, 滑动左边, 右边也跟着滚动
获取数据
-
数据是多层嵌套的, 用同步的方法拿到数据后, 把左右列表的数据分别存到 data中, 再遍历数据渲染页面
-
用接口获取详情, 用async await
-
生命周期 onLoad()
遍历渲染
用vue的语法, v-for="(item, index) in xxx", {{item}} , {{index}}
点击左菜单
-
页面进去就加载第0项, 根据点击
@tap(vue语法对应小程序的bindTap) 设置active样式, 更新右侧列表数据 -
避免在data中出现冗余数据 : 把接口所有的数据放到全局变量中, 更新时从全局变量中拿, 不再调接口
-
标签渲染不用到的数据不要放data中, 放js中, 这样性能更高
scroll-view解决切换菜单右侧商品列表不置顶
使用竖向滚动时，需要给scroll-view一个固定高度
// template中
<scroll-view class="category_list" scroll-y :scroll-top="scrollTop">
//...
</scroll-view>
// data中
scrollTop: 0
// js
// 一直为0没变化, 小程序不会发现
this.scrollTop = Math.random() / 1000;
数据本地化
setStorageSync和setStorage的区别:
以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。
通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。
它们都是将数据存储在本地缓存指定的key中，单个key最大数据长度为 1MB，所有数据存储上限为 10MB
只支持原生类型、Date、及能够通过JSON.stringify序列化的对象，不能直接传入对象。
1 先判断本地存储有没有数据
1.1 有数据
1.1.1 没有过期 使用 缓存数据
2.1.2 已经过期了 重新发送请求 获取数据
1.22 没有数据 重新发送请求 获取数据
2 构造 要存入到缓存中的数据的格式
{ time:存入的时候的时间戳,list:[接口的返回值] }
3 发送请求 获取到数据之后 将数据 存入到缓存中