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

小程序-视图与逻辑

news 2025/12/23 10:05:27

前言

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

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2025/12/17 23:21:43

有限自动机到正规文法转换器v1.0

1 项目简介这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/12/9 7:17:28

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论一、传统路径模型的根本缺陷在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

深度学习水论文：mamba＋图像增强

🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...

编程新知 2025/12/19 2:25:32

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏介绍：《编程项目实战》目录一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

Go语言多线程问题

打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲竞赛背景与意义竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响竞赛环境需求分析常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...

编程新知 2025/12/12 0:45:40