本文主要是介绍uni-app小程序商城 (3)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

分类页

左右布局

注意项: 左右标签用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解决切换菜单右侧商品列表不置顶

官方文档

使用竖向滚动时，需要给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 发送请求 获取到数据之后 将数据 存入到缓存中

这篇关于uni-app小程序商城 (3)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！