当前位置:   article > 正文

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

pages/goods_list/index.js

今天是学习小程序的第5



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

在这里插入图片描述


2. 分类页-页面布局

导航栏标题文字修改成category

// pages/category/index.json
"navigationBarTitleText": "category"
  • 1
  • 2

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

<!-- pages/category/index.wxml -->
<SearchInput></SearchInput>
  • 1
  • 2
// pages/category/index.json
{
  "usingComponents": {
    "SearchInput": "../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "category"
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我们的左边菜单和右边菜单都是可各自滚动的,我们可以用视图容器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-viewscroll-top属性:
在这里插入图片描述
在这里插入图片描述
pages/category/index.js中新增一个top变量,在handleTap函数中设置top为0
在这里插入图片描述
更多scroll-view属性查看文档:https://developers.weixin.qq.com/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.jsonLoad函数中,这个参数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.com/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时,才关闭加载图标:
在这里插入图片描述


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/96961
推荐阅读
相关标签
  

闽ICP备14008679号