小程序-视图与逻辑

小程序-视图与逻辑

devtools/2025/1/31 4:14:39/

前言

1. 声明式导航

在这里插入图片描述

在这里插入图片描述

open-type="switchTab"如果没有写这个，因为是tabBar所以写这个，就无法跳转。路径开始也必须为斜线

open-type="navigate"这个可以不写

现在开始实现后退的效果

在这里插入图片描述
现在我们就在list页面里面实现后退

在这里插入图片描述

2.编程式导航

在这里插入图片描述

2.1 跳转到非tabBar

在这里插入图片描述

在这里插入图片描述

2.2 后退导航

在这里插入图片描述

一层可以不写

3. 导航传参

3.1 声明式导航传参

在这里插入图片描述

在这里插入图片描述
这里可以看参数

说明是传进来的

3.2 编程式导航传参

在这里插入图片描述

3.3 在onLoad中接收导航参数

在这里插入图片描述

现在我们要把参数存入到data里面

4. 下拉刷新

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

下拉刷新重置为0

4.1 停止下拉刷新的效果

就是手机上要自动关闭刷新效果

在这里插入图片描述

5. 上拉触底

在这里插入图片描述

在这里插入图片描述
只有页面太多的时候超过屏幕高度的时候，才可以滑动

在这里插入图片描述

可以看出来我们这里触发了很多次，什么意思呢，意思就是，触发的时候，还没来得及加载数据，又触发了，所以应该进行截流处理，只发起一个请求，当上一个请求没有完成，就不要进行下一个请求了

5.1 配置上拉触底的距离

在这里插入图片描述
就是滚动条距离底部多少像素的时候才触发

6. 上拉触底案例-初步实现上拉触底效果

在这里插入图片描述

6.1 定义一个获取随机颜色的方法

加粗样式
在这里插入图片描述

6.2 在页面加载时获取初始数据

在这里插入图片描述

6.3 渲染UI结构并美化页面效果

在这里插入图片描述

6.4 上拉触底获取随机颜色

在这里插入图片描述

这样就可以不断加载了，但是数据太少了的时候，就不能上拉了

7. 上拉触底案例-添加loading效果和节流处理

在这里插入图片描述

这样就可以了

7.1 节流处理

当前在请求，就不允许请求下一个
在这里插入图片描述

8. 自定义编译模式

每次保存都要点击一下联系我们才能看到那个页面，挺麻烦的
我们可以每次编译都展示出我们希望看到的页面

在这里插入图片描述

这样每次编译开始的都是联系我们这个页面了

在这里插入图片描述

这样就可以删除了

9. 生命周期的概念与分类

在这里插入图片描述

10. 生命周期函数的概念与分类

在这里插入图片描述

11. 应用和页面的生命周期函数

在这里插入图片描述

后台就是手机没有显示小程序的时候，点击了菜单键的时候

在这里插入图片描述

这里有一个切后台的选项

11.1 页面的生命周期函数

在这里插入图片描述
onload来加载数据，携带参数那些
onready来修改样式，比如标题

12. wxs的概念

在这里插入图片描述

在这里插入图片描述

13. wxs的基本用法

13.1 内嵌wxs脚本

在这里插入图片描述

我们先给消息页面添加一个编译模式

在这里插入图片描述

13.2 定义外联的wxs脚本

在这里插入图片描述

在这里创建

13.3 使用wxs外联的脚本

在这里插入图片描述

13.4 wxs的特点

在这里插入图片描述

14. 案例-演示案例效果并实现导航跳转

在这里插入图片描述

我们直接导入这个项目

然后我们在project.config.json里面修改这两个就可以了
在这里插入图片描述
第一先创建商铺列表页面

第二就是创建navigator
第三就是点击传递参数
在这里插入图片描述

在这里插入图片描述
九宫格的每个数据都有id,name,icon
我们点击就要传递id和name

15.案例-设置标题内容并创建编译模式

标题肯定不能写死的
意思就是不能再shoplist.json里面就写死了，必须是点到什么就是显示什么标题
在这里插入图片描述
因为是初次渲染标题，所以在onready里面调用这个api

但是获取页面参数的话，只能在onload里面获取了
但是onload与onready又不能共享数据，所以得把参数存入data里面

在这里插入图片描述

15.1 创建商铺列表的编译模式

在这里插入图片描述
这样就会自动进入美食页面了

在这里插入图片描述

16.案例-获取并渲染商铺列表的数据

在这里插入图片描述

url那样写不行，必须得这样写才行

注意X-Total-Count这个
在这里插入图片描述

在这里插入图片描述

现在开始渲染商铺列表
左侧是图片右侧是信息
在这里插入图片描述

在这里插入图片描述

现在来一个店铺加粗的效果

在这里插入图片描述

现在让图片和信息有间距

现在让图片不紧贴边框

在这里插入图片描述

现在加一个边框

现在边框线之间有一个间距分隔开

在这里插入图片描述
现在给边框加一个圆角的样式

在这里插入图片描述

给盒子加一个阴影

在这里插入图片描述

17. 案例-初步实现上拉加载效果

在这里插入图片描述
现在开始弄上拉触底的事件，刚刚弄的是加载时候的加载效果
先配置上拉触底的距离，然后就是页码值加一
最后就是调用加载数据的方法

这里可以切换网速，如果网速比较慢，就会有多个请求了，同一时间
在这里插入图片描述

这样就可以了

18.案例-判断数据是否加载完毕

在这里插入图片描述

这里的XHR可以查看网络数据请求

在这里插入图片描述
我们已经12页了，但是数据却是还是只有80条，因为总共只有80条
所以没有数据的时候要判断一下

在这里插入图片描述

19. 案例-实现下拉刷新功能

在这里插入图片描述
这样就开启了下拉刷新的效果了
现在开始美化下拉窗口

下拉刷新我们希望从第一页数据开始加载
还要重置一些数据，比如页码值为1
在这里插入图片描述

这样就可以了

现在开始真机关闭下拉效果

在这里插入图片描述
调用这个stopPullDownRefresh函数就可以了
但是写在这里不太好

我们这里用一个cb的参数来传递
如果有cb这个回调函数，就执行，没有就不执行cb这个回调函数

在这里插入图片描述
这样就可以按需执行了

20. 使用wxs处理手机号

我们把手机号用-来分隔
在这里插入图片描述

在这里插入图片描述

接下来就要在这个数组对应的位置插入-

在这里插入图片描述

总结

下一节我们学习基础加强

http://www.ppmy.cn/devtools/154764.html

相关文章

Vue 3 30天精进之旅：Day 08 - 组件通信

Vue 3 30天精进之旅：Day 08 - 组件通信

在Vue 3的开发过程中，组件之间的通信是一个至关重要的概念。理解如何在父子组件、兄弟组件以及通过全局事件总线进行通信，将帮助我们构建更为灵活和可维护的应用。在今天的学习中，我们将探讨以下几个方面： 父子组件之间的通信兄弟…

阅读更多...

【MySQL】初始MySQL、库与表的操作

【MySQL】初始MySQL、库与表的操作

目录基本使用使用案例 SQL分类存储引擎库的操作字符集和校验规则查看系统默认字符集和校验规则查看数据库支持的字符集查看数据库支持的字符集校验规则指定编码常见数据库校验规则对数据库的影响操纵数据库库的备份与恢复表的操作创建表查看表 …

阅读更多...

扣子平台音频功能：让声音也能“智能”起来。扣子免费系列教程（14）

扣子平台音频功能：让声音也能“智能”起来。扣子免费系列教程（14）

在数字化时代，音频内容的重要性不言而喻。无论是在线课程、有声读物，还是各种多媒体应用，音频都是传递信息、增强体验的关键元素。扣子平台的音频功能，为开发者和内容创作者提供了一个强大而灵活的工具，让音频的使用和…

阅读更多...

STM32 中断系统

STM32 中断系统

目录中断定义： 中断处理的过程： 1.中断申请： 2.中断响应： 3.中断处理： 4.中断向量 : 5.中断返回： 中断优先级 1.抢占优先级 2.响应优先级 3.自然优先级中断嵌套中断执行流程中断源 NV…

阅读更多...

Python GUI 开发 | Qt Designer — 工具介绍

Python GUI 开发 | Qt Designer — 工具介绍

关注这个框架的其他相关笔记：Python GUI 开发 | PySide6 & PyQt6 学习手册-CSDN博客 Qt Designer 即 Qt 设计师，是一个强大、灵活的可视化 GUI 设计工具，可以帮助用户加快开发 PySide6 程序的速度。 Qt Designer 是专门用来制作 PySide6…

阅读更多...

SpringBoot整合Swagger UI 用于提供接口可视化界面

SpringBoot整合Swagger UI 用于提供接口可视化界面

目录一、引入相关依赖二、添加配置文件三、测试四、Swagger 相关注解一、引入相关依赖图像化依赖 Swagger UI 用于提供可视化界面： <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactI…

阅读更多...

PCB Editor层叠文件（Gerber文件输出-01）

PCB Editor层叠文件（Gerber文件输出-01）

先看底层和表层，如下图钢网表层和底层，如下图丝印表层和底层，如下图阻焊表层和底层，如下图下面来添加钻孔层，先提取钻孔表点击OK后钻孔表会挂在鼠标上

阅读更多...

go安全项目汇总表

go安全项目汇总表

Go安全项目汇总表开发者/团队GitHub/Gitee 地址主要项目项目描述Stars 数量yhy0https://github.com/yhy0/ChYingChYing目录扫描，Swagger测试，JWT，NucleiY漏洞扫描，BurpSuite，字典可配置，编码、解码-shado…

阅读更多...

最新文章