注意项: 左右标签用flex布局, 因为内容超过视口高度, 要分别设置overflow: auto;
, 才能有分别滚动的效果
如果不加的话: 1. 背景色只有一屏 2. 没有滚动条, 滑动左边, 右边也跟着滚动
数据是多层嵌套的, 用同步的方法拿到数据后, 把左右列表的数据分别存到 data中, 再遍历数据渲染页面
用接口获取详情, 用async await
生命周期 onl oad()
用vue的语法, v-for="(item, index) in xxx"
, {{item}}
, {{index}}
页面进去就加载第0项, 根据点击 @tap
(vue语法对应小程序的bindTap) 设置active
样式, 更新右侧列表数据
避免在data中出现冗余数据 : 把接口所有的数据放到全局变量中, 更新时从全局变量中拿, 不再调接口
标签渲染不用到的数据不要放data中, 放js中, 这样性能更高
官方文档
使用竖向滚动时,需要给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 发送请求 获取到数据之后 将数据 存入到缓存中