今天是学习小程序的第5天

学习内容

  • 1. 分类页-获取页面数据
  • 2. 分类页-页面布局
  • 3. 点击菜单切换商品内容
  • 4. 分类页-使用缓存技术
  • 5. 切换标题右侧菜单置顶显示
  • 6. 优化接口-提取公共接口路径
  • 7. 获取分类id
  • 8. 商品列表-实现tabs组件
  • 9. 商品列表-获取数据并渲染
  • 10. 商品列表-加载下一页数据
  • 11. 商品列表-下拉刷新
  • 12. 添加全局的正在加载中图标效果

1. 分类页-获取页面数据

2. 分类页-页面布局

导航栏标题文字修改成category：

// pages/category/index.json
"navigationBarTitleText": "category"

引入之前自定义的搜索框组件：

<!-- pages/category/index.wxml -->
<SearchInput></SearchInput>

// pages/category/index.json
{
  "usingComponents": {
    "SearchInput": "../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "category"
}

我们的左边菜单和右边菜单都是可各自滚动的，我们可以用视图容器scroll-view

样式部分可以慢慢调，需要注意的就是两个scroll-view的父容器.category-container需要设置高度为100vh - 搜索框高度，不然滚动的时候整个父容器都在动，不能实现左右菜单分动
image标签设置宽度为100%

3. 点击菜单切换商品内容

切换左侧菜单标题，变色：



点击标题切换右侧菜单：

在构造右侧菜单的时候一开始取得是下标为0的数据，也就是第一页

所以切换标题只需要改变右侧菜单对应的索引就可以了


4. 分类页-使用缓存技术

1.发送请求之前先判断本地存储中有没有旧数据
2.如果没有旧数据 => 直接发送新请求
3.如果有旧数据，旧数据也没有过期 => 就使用本地存储中的旧数据

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

代码方式：
web：

  • localStorage.setItem("key","value")
    localStorage.getItem("key")

小程序：

  • wx.setStorageSync("key","value")
    wx.getStorageSync("key")

存储时的类型转换：
web：

  • 不管存入的是什么类型的数据，最终都会先调用toString()，将数据变成字符串

小程序：

  • 不存在类型转换这个操作，存什么类型的数据，获取的时候就是什么类型


5. 切换标题右侧菜单置顶显示

具体问题是：当我们滚动了右侧的内容，然后切换标题，右侧内容的滚动条仍然会停在原来的位置，而不会回到顶部。我们需要让他每次切换标题都能再次回到顶部

利用scroll-view的scroll-top属性：


在pages/category/index.js中新增一个top变量，在handleTap函数中设置top为0

更多scroll-view属性查看文档：https://developers.weixin.qq/miniprogram/dev/component/scroll-view.html

6. 优化接口-提取公共接口路径

request/index.js:

调用request函数的时候传入的参数url公共的前缀都可以删除了

7. 获取分类id

我们点击category页面右侧商品的时候，需要跳转页面，在navigator标签上加url属性，设置要跳转的页面是goods_list/index

同时我们需要传递参数过去，从而加载对应的商品列表，传递的参数一般在接口文档中查看：

分类id应该是这个cat_id：


可以在模拟器下面看到页面参数：

怎么拿到参数：
在pages/goods_list/index.js的onLoad函数中，这个参数options就是页面的参数

8. 商品列表-实现tabs组件

前几天刚做了个基本一样的，不细说直接贴图了：

创建组件：

声明组件：

这里循环的tabs数组需要父组件传过来，tab对应的内容不确定，用插槽
Tabs.wxml：

Tabs.less：

goods_list/index.js：

Tabs.js：

good_list/index.wxml：

9. 商品列表-获取数据并渲染

这次请求要携带一些参数：

data属性是传递的参数


样式随便写了一下（：

10. 商品列表-加载下一页数据

当用户上滑页面，滚动条触底的时候，开始加载下一页数据
1.滚动条触底事件
2.判断还有没有下一页数据（比较总页数和当前页码）
3.没有下一页数据 => 弹出提示
4.有下一页数据 => 加载下一页数据

在小程序开发文档中找到滚动条触底事件：

https://developers.weixin.qq/miniprogram/dev/reference/api/Page.html#参数

总页数：
设置全局变量totalPages：

总页数要通过总条数计算获得，因为获取到的数据里面只有总条数没有总页数
pagesize是我们传递的参数，设置了为10
这里计算总页数要向上取整，用Math.ceil()，比如总条数total为23，➗pagesize为10 = 2.3，应该取3页


当前页码就是我们传递参数的pagenum

下面进行判断：
有下一页数据 => 当前页码+1，重新发送请求
没有下一页数据 => 弹出提示

并且我们获取数据的代码也要进行修改：
原来的代码是goodsList: res.data.message.goods，这样的话就是每次只会加载10条数据，加载到最后也只有10条数据，应该要对这个数组进行拼接

完善一下提示：

11. 商品列表-下拉刷新

用户按住鼠标向下滑的时候能出现一个加载窗口，并且重新显示页面

1.触发下拉刷新：
在goods_list/index.json中开启一个配置项：


我们的业务代码需要写在下拉刷新事件里，
2. 找到下拉刷新事件：

3. 重置数组
4. 重置当前页码
5. 重新发送请求

6.数据请求回来之后，需要手动关闭加载效果
这样可以避免数据已经显示了，但是加载圈还在一直转
(如果第一次进来的时候没有调用下拉刷新窗口，直接关闭也不会报错)

12. 添加全局的正在加载中图标效果

小程序已经提供了相关API


考虑一下在哪里添加这两段代码比较合适，我们希望在发送请求时调用，请求完毕时关闭
但是不要放在发送请求的方法里，发送的请求太多了，这样会很繁琐，可以直接封装在我们的request()方法里

无论success还是fail，我们都需要关闭加载图标，所以放在complete里

还有一个问题：
首页有三个请求是同时发送的
pages/index/index.js：

但是它们不一定同时回来，先回来的就会先把开启的加载图标关闭，这样就不对了
我们应该在三个请求全部回来之后再关闭加载图标

这样，我们可以定义一个变量保存同时发送异步请求的次数：

当这个次数减到0时，才关闭加载图标：

更多推荐

wx小程序学习Day5 使用本地存储、发送请求传参、实现tabs组件、加载下一页、下拉刷新、正在加载中效果