小程序-视图与逻辑

小程序-视图与逻辑

embedded/2025/2/2 8:31:49/

前言

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/embedded/158858.html

相关文章

自定义数据集使用框架的线性回归方法对其进行拟合

自定义数据集使用框架的线性回归方法对其进行拟合

代码 import torch import numpy as np import torch.nn as nncriterion nn.MSELoss()data np.array([[-0.5, 7.7],[1.8, 98.5],[0.9, 57.8],[0.4, 39.2],[-1.4, -15.7],[-1.4, -37.3],[-1.8, -49.1],[1.5, 75.6],[0.4, 34.0],[0.8, 62.3]])x_data data[:, 0] y_data data…

阅读更多...

10 Flink CDC

10 Flink CDC

10 Flink CDC 1. CDC是什么2. CDC 的种类3. 传统CDC与Flink CDC对比4. Flink-CDC 案例5. Flink SQL 方式的案例 1. CDC是什么 CDC 是 Change Data Capture（变更数据获取）的简称。核心思想是，监测并捕获数据库的变动（包括数据或数…

阅读更多...

初识c语言（关键字）

初识c语言（关键字）

前言： 注意： 变量的名称不能是关键字变量的命名： 1、有意义 int age; flat salary; 2、名字必须是字母、数字、下划线组成，不能有特殊字符， 同时不能以数字开头 3、变量的命名不能是关键字内容： …

阅读更多...

75-《倒提壶》

75-《倒提壶》

倒提壶倒提壶（学名：Cynoglossum amabile Stapf et Drumm.）：紫草科，琉璃草属多年生草本植物，高可达60厘米。茎密生贴伏短柔毛。基生叶，长圆状披针形或披针形，茎生叶长圆形或披针形&a…

阅读更多...

分布式系统相关面试题收集

分布式系统相关面试题收集

目录什么是分布式系统，以及它有哪些主要特性？ 分布式系统中如何保证数据的一致性？ 解释一下CAP理论，并说明在分布式系统中如何权衡CAP三者？ 什么是分布式事务，以及它的实现方式有哪些？ 什么是…

阅读更多...

Spring Boot + Facade Pattern : 通过统一接口简化多模块业务

Spring Boot + Facade Pattern : 通过统一接口简化多模块业务

文章目录 Pre概述在编程中，外观模式是如何工作的？外观设计模式 UML 类图外观类和子系统的关系优点案例外观模式在复杂业务中的应用实战运用1. 项目搭建与基础配置2. 构建子系统组件航班服务酒店服务旅游套餐服务 3. 创建外观类4. 在 Controller 中使用外…

阅读更多...

oracle 19C RAC打补丁到19.26

oracle 19C RAC打补丁到19.26

oracle 19CRAC打补丁到19.26 本文只保留简介命令和每个命令大概的用时，方便大家直接copy使用，并了解每个命令的预期时间，减少命令执行期的等待焦虑。 1.本次所需的补丁如下 p6880880_190000_Linux-x86-64.zip （.43的opatch&…

阅读更多...

linux 扩容

linux 扩容

tmpfs tmpfs 82M 0 82M 0% /run/user/1002 tmpfs tmpfs 82M 0 82M 0% /run/user/0 [输入命令]# fdisk -lu Disk /dev/vda: 40 GiB, 42949672960 bytes, 83886080 sectors Units: sectors of 1 * 512 512 bytes Sector size (logi…

阅读更多...

最新文章