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

小程序-视图与逻辑

news 文章来源：https://blog.csdn.net/2302_79981885/article/details/145386604 2025/5/4 13:40: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

Flutter Candies 一桶天下

| | | | | | | | 入魔的冬瓜最近刚入桶的兄弟，有责任心的开发者，对自己的项目会不断进行优化，达到最完美的状态自定义日历组件主要功能支持公历，农历，节气，传统节日，常用节假日 …...

编程日记 2025/2/2 13:36:13

maven如何不把依赖的jar打包到同一个jar？

spring boot项目打jar包部署： 经过以下步骤， 最终会形成maven依赖的多个jar（包括lib下添加的）、我们编写的程序代码打成一个jar，将程序jar与依赖jar分开，便于管理： success： 最终…...

编程日记 2025/2/2 13:34:11

HTML5 技术深度解读：本地存储与地理定位的最佳实践

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧 02-HTML常见文本标签解析：从基础到进阶的全面指南 03-HTML从入门到精通：链接与图像标签全解析 04-HTML 列表标签全解析：无序与有序列表的深度应用 05-HTML表格标签全面…...

编程日记 2025/2/2 13:31:08

AIGC技术中常提到的 “嵌入转换到同一个向量空间中”该如何理解

在AIGC（人工智能生成内容）技术中，“嵌入转换到同一个向量空间中”是一个核心概念，其主要目的是将不同类型的输入数据（如文本、图像、音频等）映射到一个统一的连续向量空间中，从而实现数据之间的…...

编程日记 2025/2/2 13:29:06

【机器学习理论】朴素贝叶斯网络

基础知识： 先验概率：对某个事件发生的概率的估计。可以是基于历史数据的估计，可以由专家知识得出等等。一般是单独事件概率。后验概率：指某件事已经发生，计算事情发生是由某个因素引起的概率。一般是一个条件概率。 …...

编程日记 2025/2/2 13:22:59

Docker 部署 GLPI（IT 资产管理软件系统）

GLPI 简介 GLPI open source tool to manage Helpdesk and IT assets GLPI stands for Gestionnaire Libre de Parc Informatique（法语资讯设备自由软件的缩写） is a Free Asset and IT Management Software package, that provides ITIL Service De…...

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

【Vaadin flow 实战】第5讲-使用常用UI组件绘制页面元素

vaadin flow官方提供的UI组件文档地址是 https://vaadin.com/docs/latest/components这里，我简单实战了官方提供的一些免费的UI组件，使用案例如下： Accordion 手风琴 Accordion 手风琴效果组件 Accordion 手风琴-测试案例代码 Slf4j PageT…...

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

强化学习 DAY1：什么是 RL、马尔科夫决策、贝尔曼方程

第一部分 RL基础：什么是RL与MRP、MDP 1.1 入门强化学习所需掌握的基本概念 1.1.1 什么是强化学习：依据策略执行动作-感知状态-得到奖励强化学习里面的概念、公式，相比ML/DL特别多，初学者刚学RL时，很容易被接连不断…...

编程日记 2025/2/2 13:13:48

理解神经网络：Brain.js 背后的核心思想

温馨提示这篇文章篇幅较长，主要是为后续内容做铺垫和说明。如果你觉得文字太多，可以：先收藏，等后面文章遇到不懂的地方再回来查阅。直接跳读，重点关注加粗或高亮的部分。放心，这种“文字轰炸”不会常有的，哈哈~ 感谢你的耐心阅读！😊 欢迎来到 brain.js 的学习之旅！…...

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

【Docker】dockerfile识别当前构建的镜像平台

在编写dockerfile的时候，可能会遇到需要针对不同平台进行不同操作的时候，这需要我们对dockerfile进行针对性修改。比如opencv的依赖项libjasper-dev在ubuntu18.04上就需要根据不同的平台做不同的处理，关于这个库的安装在另外一篇博客里面有…...

编程日记 2025/2/2 13:07:42