小程序-视图与逻辑

前言

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

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接下来就要在这个数组对应的位置插入-

在这里插入图片描述
在这里插入图片描述

总结

下一节我们学习基础加强

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/963191.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

list的使用,及部分功能的模拟实现(C++)

目录(文章中"节点"和"结点"是同一个意思) 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 1.2.6 list…

StarRocks BE源码编译、CLion高亮跳转方法

阅读SR BE源码时,很多类的引用位置爆红找不到,或无法跳转过去,而自己的Linux机器往往缺乏各种C依赖库,配置安装比较麻烦,因此总体的思路是通过CLion远程连接SR社区已经安装完各种依赖库的Docker容器,进行编…

Axure PR 9 旋转效果 设计交互

大家好,我是大明同学。 这期内容,我们将学习Axure中的旋转效果设计与交互技巧。 旋转 创建旋转效果所需的元件 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.在元件库中拖出一个按钮元件。 创建交互 创建按钮交互状态 1.选中按钮元件&#xf…

Java - 引用类型:强引用、软引用、弱引用和虚引用详解

文章目录 概述1. 强引用(Strong Reference)1.1 什么是强引用?1.2 强引用的特点1.3 强引用的使用场景1.4 强引用的注意事项 2. 软引用(Soft Reference)2.1 什么是软引用?2.2 软引用的特点2.3 软引用的使用场…

S4 HANA给科目分配允许记账的税码

本文主要介绍在S4 HANA OP中给科目分配允许记账的税码相关设置。具体请参照如下内容: 1. 给科目分配允许记账的税码 以上配置定义了总账科目可以使用什么税码进行记账。通常在科目主数据中会明确总账科目的“Tax Category”来请明确总账科目可以使用什么类型的税码…

xss-labs靶场

xss-labs靶场 xss攻击类型 反射型xss 即攻击者将恶意脚本嵌入到url或者表单中,当用户访问特定的url或者提交表单时(用户端请求时),恶意脚本会执行 攻击需要用户点击恶意链接或访问包含恶意参数的url触发 存储型xss 即攻击者将恶意脚本提交…

CVE-2024-23897-Jenkins任意文件读取漏洞复现

content Jenkins是什么CVE-2024-23897总结修复建议 Jenkins是什么 Jenkins是一人基于Java开发的、可扩展的持续集成引擎,用于持续、自动地构建/测试软件项目,可以监控一些定时执行的任务。 官网文档: Jenkins是一款开源 CI&CD 软件&…

解析 Oracle 中的 ALL_SYNONYMS 和 ALL_VIEWS 视图:查找同义词与视图的基础操作

目录 前言1. ALL_SYNONYMS 视图2. ALL_VIEWS 视图3. 扩展 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. ALL_SYNONYMS 视图 在 Oracle 数据库中,同义词(Synonym)是对数…

30.Word:设计并制作新年贺卡以及标签【30】

目录 NO1.2 NO3邮件合并-信函 NO4邮件合并-标签​ NO1.2 另存为/F12:考生文件夹:Word.docx布局→页面设置对话框→页边距:上下左右→纸张:宽度/高度(先调页边距🆗)设计→页面颜色→填充效果→…

Unity实现按键设置功能代码

一、前言 最近在学习unity2D,想做一个横版过关游戏,需要按键设置功能,让用户可以自定义方向键与攻击键等。 自己写了一个,总结如下。 二、界面效果图 这个是一个csv文件,准备第一列是中文按键说明,第二列…

一个简单的自适应html5导航模板

一个简单的 HTML 导航模板示例&#xff0c;它包含基本的导航栏结构&#xff0c;同时使用了 CSS 进行样式美化&#xff0c;让导航栏看起来更美观。另外&#xff0c;还添加了一些 JavaScript 代码&#xff0c;用于在移动端实现导航菜单的展开和收起功能。 PHP <!DOCTYPE htm…

TensorFlow 示例摄氏度到华氏度的转换(一)

TensorFlow 实现神经网络模型来进行摄氏度到华氏度的转换&#xff0c;可以将其作为一个回归问题来处理。我们可以通过神经网络来拟合这个简单的转换公式。 1. 数据准备与预处理 2. 构建模型 3. 编译模型 4. 训练模型 5. 评估模型 6. 模型应用与预测 7. 保存与加载模型 …

2.1.3 相机图像信号处理的基本流程

文章目录 ISP基本流程ISP各基本流程职责 ISP基本流程 图像信号处理将传感器采集到的Bayer阵列数据转换成符合人眼观感的图像数据。ISP(Image Signal Processing)图像信号处理基本流程包括坏点校正&#xff08;DPC, Defect Pixel Correction&#xff09;&#xff0c;黑电平校正&…

51单片机CLD1602显示万年历+闹钟+农历+整点报时

1. 硬件设计 硬件是我自己设计的一个通用的51单片机开发平台&#xff0c;可以根据需要自行焊接模块&#xff0c;这是用立创EDA画的一个双层PCB板&#xff0c;所以模块都是插针式&#xff0c;不是表贴的。电路原理图在文末的链接里&#xff0c;PCB图暂时不选择开源。 B站上传的…

颠覆AI界限!o3-mini与DeepSeek V3的巅峰对决

性能之战&#xff1a;谁才是AI推理的王者&#xff1f; 在AI技术飞速发展的今天&#xff0c;OpenAI最新发布的o3-mini模型如同一颗新星&#xff0c;闪耀在AIGC的天空中。它不仅带来了惊人的性能提升&#xff0c;还具备了多项用户友好的功能。与此同时&#xff0c;DeepSeek V3也…

Spring Boot项目如何使用MyBatis实现分页查询

写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油&#xff0c;冲鸭&#x…

PDCA 循环法

目录 循环周而复始大环套小环阶梯式上升 如何从 0 开始搭建 PDCA应用场景示例一、健身 APP 拉新活动策划第一阶段&#xff1a;制定详细的活动计划与方案第二阶段&#xff1a;活动执行阶段第三阶段&#xff1a;活动效果监控阶段第四阶段&#xff1a;活动复盘阶段 二、员工培训三…

深入理解Spring事务管理

一、事务基础概念 1.1 什么是事务&#xff1f; 事务&#xff08;Transaction&#xff09;是数据库操作的最小工作单元&#xff0c;具有ACID四大特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;事务中的操作要么全部成功&#xff0c;要么全部失败 一致…

【Linux-网络】初识计算机网络 Socket套接字 TCP/UDP协议(包含Socket编程实战)

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长&#xff0c;行则将至 目录 &#x1f4da;一、初识计算机网络 &#x1f4d6; 背景 &#x1f4d6; 网络协议 &#x1f516;OSI七层…

2 MapReduce

2 MapReduce 1. MapReduce 介绍1.1 MapReduce 设计构思 2. MapReduce 编程规范3. Mapper以及Reducer抽象类介绍1.Mapper抽象类的基本介绍2.Reducer抽象类基本介绍 4. WordCount示例编写5. MapReduce程序运行模式6. MapReduce的运行机制详解6.1 MapTask 工作机制6.2 ReduceTask …