当前位置：首页 > news >正文

小程序-视图与逻辑

news 2026/3/31 17:11:17

前言

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处理手机号

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

在这里插入图片描述

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

在这里插入图片描述

总结

下一节我们学习基础加强

相关文章：

小程序-视图与逻辑

前言 1. 声明式导航 open-type"switchTab"如果没有写这个，因为是tabBar所以写这个，就无法跳转。路径开始也必须为斜线 open-type"navigate"这个可以不写现在开始实现后退的效果现在我们就在list页面里面实现后退 2.编程式导航…...

编程日记 2025/2/2 14:54:57

UE5制作视差图

双目深度估计开源数据集很多都是用UE制作的，那么我们自己能否通过UE制作自己想要的场景的数据集呢。最近花了点时间研究了一下，分享给需要的小伙伴。主要使用的是UnrealCV插件，UnrealCV是一个开源项目，旨在帮助计算机视觉研究人…...

编程日记 2025/2/2 14:52:50

海浪波高预测（背景调研）

#新星杯14天创作挑战营第7期# ps：图片由通义千问生成历史工作： 针对更高细粒度、更高精度的波浪高度预测任务： Mumtaz Ali 等人提出了一种多元线性回归模型（MLR-CWLS），该模型利用协方差加权最小二乘法&a…...

编程日记 2025/2/2 14:49:46

代码随想录算法训练营第四十二天-动态规划-股票-188.买卖股票的最佳时机IV

题目要求进行k次买卖其实就是上一题的扩展，把2次扩展为k次定义动规数组依然是二维，第一个维度表示第几天，第二个维度表示第几次买入和卖出所以第二个维度的长度应该是2k1在for循环内，要使用一个内循环来表示第几次买入或卖出&…...

编程日记 2025/2/2 14:48:43

Gradle配置指南：深入解析settings.gradle.kts（Kotlin DSL版）

文章目录 Gradle配置指南：深入解析settings.gradle.kts（Kotlin DSL版）settings.gradle.kts 基础配置选项单项目配置多项目配置高级配置选项插件管理（Plugin Management）基础配置模板案例：Android项目标准配…...

编程日记 2025/2/2 14:43:37

软件工程经济学-日常作业+大作业

目录一、作业1 作业内容解答二、作业2 作业内容解答三、作业3 作业内容解答四、大作业作业内容解答 1.建立层次结构模型 (1)目标层 (2)准则层 (3)方案层 2.构造判断矩阵 (1)准则层判断矩阵 (2)方案层判断矩阵 3.层次单排序及其一致性检验代码 …...

编程日记 2025/2/2 14:40:34

论文阅读(三)：微阵列数据的图形模型和多变量分析

1.论文链接：Graphical Models and Multivariate Analysis of Microarray Data 摘要： 基因表达数据的通常分析忽略了基因表达值之间的相关性。从生物学上讲，这种假设是不合理的。本章介绍的方法允许通过稀疏高斯图形模型来描述基因之间的相关…...

编程日记 2025/2/2 14:36:30

【大模型LLM面试合集】大语言模型架构_MHA_MQA_GQA

MHA_MQA_GQA 1.总结在 MHA（Multi Head Attention） 中，每个头有自己单独的 key-value 对；标准的多头注意力机制，h个Query、Key 和 Value 矩阵。在 MQA（Multi Query Attention） 中只会有一组 k…...

编程日记 2025/2/2 14:30:23

向上调整算法（详解）c++

算法流程： 与⽗结点的权值作⽐较，如果⽐它⼤，就与⽗亲交换； 交换完之后，重复 1 操作，直到⽐⽗亲⼩，或者换到根节点的位置这里为什么插入85完后合法？ 我们插入一个85，…...

编程日记 2025/2/2 14:23:16

【Transformer】手撕Attention

import torch from torch import nn import torch.functional as F import mathX torch.randn(16,64,512) # B,T,Dd_model 512 # 模型的维度 n_head 8 # 注意力头的数量多头注意力机制 class multi_head_attention(nn.Module): def __init__(self, d_model, n_hea…...

编程日记 2025/2/2 14:19:07

844.比较含退格的字符串

目录题目思路解法收获题目给定 s 和 t 两个字符串，当它们分别被输入到空白的文本编辑器后，如果两者相等，返回 true 。# 代表退格字符。注意：如果对空文本输入退格字符，文本继续为空。思路如何解退格之后left…...

编程日记 2025/2/2 14:16:05

图书管理系统 Axios 源码__编辑图书

目录功能概述： 代码实现（index.js）： 代码解析： 图书管理系统中，删除图书功能是核心操作之一。下是基于 HTML、Bootstrap、JavaScript 和 Axios 实现的删除图书功能的详细介绍。功能概述： …...

编程日记 2025/2/2 14:05:53

LabVIEW纤维集合体微电流测试仪

LabVIEW开发纤维集合体微电流测试仪。该设备精确测量纤维材料在特定电压下的电流变化，以分析纤维的结构、老化及回潮率等属性，对于纤维材料的科学研究及质量控制具有重要意义。项目背景在纤维材料的研究与应用中，电学性能是评估其性能…...

编程日记 2025/2/2 14:02:49

Commander 一款命令行自定义命令依赖

一、安装 commander 插件 npm install commander 二、基本用法 1. 创建一个简单的命令行程序创建一个 JavaScript 文件，例如 mycli.js，并添加以下代码： // 引入 commander 模块并获取 program 对象。const { program } require("…...

编程日记 2025/2/2 13:55:39

Day24 洛谷普及2004（内涵前缀和与差分算法）

零基础洛谷刷题记录 Day01 2024.11.18 Day02 2024.11.25 Day03 2024.11.26 Day04 2024.11.28 Day05 2024.11.29 Day06 2024 12.02 Day07 2024.12.03 Day08 2024 12 05 Day09 2024.12.07 Day10 2024.12.09 Day11 2024.12.10 Day12 2024.12.12 Day13 2024.12.16 Day14 2024.12.1…...

编程日记 2025/2/2 13:52:35

遗传算法与深度学习实战（33）——WGAN详解与实现

遗传算法与深度学习实战（33）——WGAN详解与实现 0. 前言1. 训练生成对抗网络的挑战2. GAN 优化问题2.1 梯度消失2.2 模式崩溃 2.3 无法收敛3 Wasserstein GAN3.1 Wasserstein 损失3.2 使用 Wasserstein 损失改进 DCGAN 小结系列链接 0. 前言原始的生成…...

编程日记 2025/2/2 13:47:27

gitlab云服务器配置

目录 1、关闭防火墙 2、安装gitlab 3、修改配置 4、查看版本 GitLab终端常用命令 5、访问 1、关闭防火墙 firewall-cmd --state 检查防火墙状态 systemctl stop firewalld.service 停止防火墙 2、安装gitlab xftp中导入安装包 [rootgitlab ~]#mkdir -p /service/tool…...

编程日记 2025/2/2 13:45:25

SAP SD学习笔记27 - 请求计划(开票计划)之1 - 定期请求(定期开票)

上两章讲了贩卖契约（框架协议）的概要，以及贩卖契约中最为常用的基本契约 - 数量契约和金额契约。 SAP SD学习笔记26 - 贩卖契约(框架协议)的概要，基本契约 - 数量契约_sap 框架协议-CSDN博客 SAP SD学习笔记27 - 贩卖契约(框架…...

编程日记 2025/2/2 13:44:24

HTML DOM 修改 HTML 内容

HTML DOM 修改 HTML 内容引言 HTML DOM（文档对象模型）是浏览器内部用来解析和操作HTML文档的一种机制。通过DOM，我们可以轻松地修改HTML文档的结构、样式和行为。本文将详细介绍如何使用HTML DOM来修改HTML内容，包括元素的增删改查、属性修改以及事件处理等。 1. HTML …...

编程日记 2025/2/2 13:41:20

基于VMware的ubuntu与vscode建立ssh连接

1.首先安装openssh服务 sudo apt update sudo apt install openssh-server -y 2.启动并检查ssh服务状态到这里可以按q退出之后输入命令 ： ip a 红色挡住的部分就是我们要的地址，这里就不展示了哈 3.配置vscode 打开vscode 搜索并安装：…...

编程日记 2025/2/2 13:39:17

利用快马平台与vscode codex快速构建react待办事项应用原型

最近在尝试用AI工具快速验证产品原型，发现InsCode(快马)平台配合VSCode Codex能实现惊人的开发效率。以React待办事项应用为例，从零到可交互原型只用了不到10分钟，分享下具体实现思路和操作过程。需求拆解与AI描述首先将待办事项应用的7个核…...

编程新知 2026/3/31 16:52:29

SQL 基础及 MySQL DBA 运维实战 - 6：Mycat代理技术

MySQL DBA运维实战：集群与代理技术深度解析引言在现代互联网应用中，数据库的高可用性、可扩展性和性能是企业级应用的核心需求。随着业务量的增长，单一数据库服务器往往无法满足需求，此时数据库集群和代理技术成为解决这些问题…...

编程新知 2026/3/31 16:44:22

OneMore插件终极指南：160+功能让你的OneNote效率提升3倍

OneMore插件终极指南：160功能让你的OneNote效率提升3倍【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore OneMore是一款免费开源的OneNote增强插件&#xff…...

编程新知 2026/3/31 16:13:47

Cadence Allegro 17.4进阶技巧：PCB Editor中高效调整丝印的三大步骤

1. 丝印调整的核心价值与准备工作在PCB设计流程中，丝印调整往往被新手工程师视为"收尾环节"，但实际它直接影响着后续生产的可制造性和产品维护的便利性。Cadence Allegro 17.4的PCB Editor模块提供了完整的丝印处理工具链，我经手…...

编程新知 2026/3/31 15:45:29

FastGPT vs Dify vs Coze：哪个AI平台更适合你的项目需求？（2024最新对比）

FastGPT vs Dify vs Coze：2024年AI开发平台深度选型指南当我们需要将大语言模型整合到业务系统中时，总会面临平台选择的难题。去年我在为一家金融科技公司搭建智能客服系统时，曾花费两周时间深度测试了市面上主流的三个AI开发平台——FastGP…...

编程新知 2026/3/31 13:22:53

科研人必备：用浏览器插件给IEEEXplore做个‘小手术’，告别20秒加载

科研效率革命：用浏览器插件精准优化IEEEXplore访问体验每次打开IEEEXplore文献库，那个转不停的加载图标是否让你焦躁不安？作为每天要与学术数据库打交道的科研工作者，20秒的等待时间足以打断思考流，降低工作效率。这背…...

编程新知 2026/3/31 12:11:38

LangFlow+Ollama快速部署：3步搭建本地AI应用开发环境

LangFlowOllama快速部署：3步搭建本地AI应用开发环境想快速搭建一个属于自己的AI应用开发环境，但又不想折腾复杂的命令行和配置？今天，我来分享一个极其简单的方法：用LangFlow和Ollama，只需3步，…...

编程新知 2026/3/31 12:11:38

TEdit终极指南：如何用免费地图编辑器10倍提升泰拉瑞亚创作效率

TEdit终极指南：如何用免费地图编辑器10倍提升泰拉瑞亚创作效率【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also let…...

编程新知 2026/3/31 12:01:35

HarmonyOS 音乐播放器进阶实战——AVPlayer状态管理与播放列表

1. AVPlayer状态机深度解析在HarmonyOS音乐播放器开发中，AVPlayer的状态管理就像驾驶手动挡汽车——你需要清楚知道当前处于哪个档位，才能平稳切换。我曾在项目中因为状态处理不当导致音乐卡顿，后来才发现是状态机流转出了问题。 AVPlayer…...

编程新知 2026/3/31 11:49:26

深度解析Windows设备指纹伪装技术：EASY-HWID-SPOOFER内核级硬件隐私保护实现

深度解析Windows设备指纹伪装技术：EASY-HWID-SPOOFER内核级硬件隐私保护实现【免费下载链接】EASY-HWID-SPOOFER 基于内核模式的硬件信息欺骗工具项目地址: https://gitcode.com/gh_mirrors/ea/EASY-HWID-SPOOFER 在数字化时代，硬件隐私保护已成…...

编程新知 2026/3/31 10:51:00