小程序-3(页面导航+页面事件+生命周期+WXS)

目录

1.页面导航

声明式导航

导航到tabBar页面

导航到非tabBar页面

后退导航

编程式导航

后退导航

导航传参

声明式导航传参

编程式导航传参

在onload中接收导航参数

2.页面事件

下拉刷新

停止下拉刷新的效果

​编辑

上拉触底

配置上拉触底距离

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

生命周期函数

应用的生命周期函数

页面的生命周期函数

4.WXS

WXS的定义

WXS和JavaScript的关系

内嵌wxs脚本

定义外联的WXS脚本

使用定义的外联的wxs脚本

wxs的特点

判断是否还有下一页数据


1.页面导航

声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转

编程式导航:调用小程序的导航API,实现页面的跳转

声明式导航

导航到tabBar页面

在navigator中要用到url属性和open-type属性,其中url表示要跳转的页面的地址,必须以“/”开头,open-type表示跳转的方式,必须为switchTab

导航到非tabBar页面

与导航到tabBar页面相似,只是open-type="navigate",导航到非tabBar页面时open-type属性可以省略

后退导航

在当前页面的wxml文件中写,open-type="navigateBack" delta="1"  ,delta的值必须是数字,表示要后退的层级,如果只是后退到上一页面,可以省略delta属性,因为其默认值就是1

编程式导航

编程式导航调用wx.switchTab()方法,可以跳转到tabBar页面

编程式导航中,导航到tabBar页面与导航到非tabBar页面一样,注意网址第一位都要写“/”

后退导航

后退导航调用wx.navigateBack()方法,可以返回上一页面或多级页面

如果想退回多级页面,可以在wx.navigateBack()方法中定义一个delta来赋值想要后退的页面数

导航传参

声明式导航传参

url属性来指明路径,同时后面可以传递参数

路径和参数之间用?分隔,参数值与参数值之间用=相连(参数名=参数值),不同的参数之间用&相隔

编程式导航传参

bindtap绑定了事件,在调用事件时同样是在网址后面加上了参数,写法与上面相同

在onload中接收导航参数

通过两种导航方式得到的参数,可以直接在onload事件中得到

因为options仅作用于onload事件中,想要把得到的参数运用于整个页面,可以在data中定义一个空的query,在onload中,使用this.setData({query:options})将参数值给query,从而实现参数在整个页面的应用

2.页面事件

下拉刷新

触发下拉刷新事件,要把count的值重置为0,可以调用下拉刷新的函数onPullDownRefresh,在该函数中再调用this.setData方法,将count值重新赋值为0

停止下拉刷新的效果

实现页面的下拉刷新,在页面的.json文件中配置onPullDownRefresh:true;实现全局的下拉刷新在app.json文件中配置。backgroundColor来设置下拉界面的颜色,backgroundTextStyle来设置下拉刷新小圆点的颜色效果

下拉刷新时,页面不会自动回到顶部,这时可以在onPullDownRefresh函数中调用wx.stopPullDownRefresh()函数,仅需调用不需要写回调函数

上拉触底

在页面的.js文件中,通过onReachBottom()函数来触发上拉触底事件

配置上拉触底距离

在.json文件中,通过onReachBottomDistance属性来配置上拉触底的距离,默认是50px

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

应用生命周期(小程序)和页面生命周期

生命周期函数

生命周期函数是小程序框架提供的内置函数,伴随着生命周期执行

生命周强调的是时间段,生命周期函数强调的是时间点

生命周期函数又分为应用生命周期函数和页面生命周期函数

应用的生命周期函数

小程序的应用生命周期函数在app.js中进行声明

onLaunch  小程序初始化完成,执行此函数,全局只触发一次

onShow    小程序启动,或者从后台进入前台显示时触发(可触发多次)

onHide     小程序从前台进入后台时触发(可触发多次)

页面的生命周期函数

页面的生命周期函数在页面的.js文件中进行声明

onLoad  监听页面加载,一个页面只调用1次;可以初始化一些数据或者转存一些参数

onShow  监听页面显示

onReady  监听页面初次渲染完成,一个页面只调用一次;  可以调用wx.setNavigationBarTitle去修改页面内容

onHide  监听页面隐藏

onUnload  监听页面卸载,一个页面只调用1次

4.WXS

WXS的定义

wxs是小程序独有的脚本语言,用来渲染wxml结构,wxml无法调用页面中在.js中定义的函数,但是wxml可以调用wxs中定义的函数

WXS和JavaScript的关系

内嵌wxs脚本

wxs代码可以写在wxml文件中的<wxs>标签内,就像是javascript代码可以写在html文件的<script>标签内一样

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模板名称,方便询问

module.exports.toUpper+function(){}   该句话中toUpper是方法,module.exports是模块导入这个方法,在后面调用的时候,可以直接使用module名.方法名{{参数}}

定义外联的WXS脚本

wxs代码还可以编写在以.wxs为后缀名的文件内,就像javascript代码可以编写在以.js为后缀名的文件中一样

写在.wxs文件中的代码要注意格式的完整和正确性

使用定义的外联的wxs脚本

先定义好的外联wxs文件,在wxml文件中引入外联文件并进行命名

<wxs src="../../utils/tools.wxs" module="命名"></wxs>

其中src必须是相对路径

wxs的特点

  1. 与javascript语言不同,虽然借鉴了较多,但本质上是不相同的
  2. 不能作为组件的回调函数,wxs经常与Mustache搭配使用,但在wxs中定义的函数不能作为组件的回调函数使用
  3. 隔离性:不能调用js中定义的函数,不能调用小程序提供的API
  4. 性能好:在iOS设置上,小程序内的wxs会比js快2-20倍;在android设备上,二者的运行效率无差异

判断是否还有下一页数据

arr.splice(a,b,'c')  在数组的索引a处,删除b个元素,添加c

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

spring security源码追踪理解(一)

一、前言 近期看了spring security相关的介绍&#xff0c;再加上项目所用若依框架的底层安全模块也是spring security&#xff0c;所以想从源码的角度加深下对该安全模块的理解&#xff08;看源码之前&#xff0c;我们要先有个意识&#xff0c;那就是spring security安全模块主…

一文-深入了解Ansible常见模块、安装和部署

1 Ansible 介绍 Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于python 开发的&#xff08;集合了众多运维工具 puppet、cfengine、chef、func、fabric的优点&#xff09;自动化运维工具, 其功能实现基于ss…

Linux中nohup(no hang up)不挂起,用于在系统后台不挂断地运行命令,即使退出终端也不会影响程序的运行。

nohup的英文全称是 no hang up&#xff0c;即“不挂起”。这个命令在Linux或Unix系统中非常有用&#xff0c;主要用于在系统后台不挂断地运行命令&#xff0c;即使退出终端也不会影响程序的运行。默认情况下&#xff08;非重定向时&#xff09;&#xff0c;nohup会将输出写入一…

美国银行:高息下的稳健

“四大银行”财报悉数登场&#xff0c;折射美国经济忧虑。 今天我们来聊——美国银行 上周五摩根大通、富国银行和花旗银行发布了二季度财报&#xff0c;结果不及预期&#xff0c;股价都是一个走法&#xff0c;跌。反倒是姗姗来迟的美国银行Q2业绩超预期&#xff0c;大涨超5%。…

统计学13——时间序列分析

目录 知识结构 ​编辑内容精读 1.时间序列及其分开类 2.描述性分析 3.时间序列预测 3.1预测过程 3.2平稳时间序列 3.3趋势型序列 3.4复合型序列 名词解释 知识结构 内容精读 1.时间序列及其分开类 时间序列顾名思义就是按时间顺序观察排列而成的序列&#xff0c;根…

苍穹外卖图片不显示

上传图片到自己的阿里云oss中&#xff0c;然后对应链接放到数据库中 显示成功

Linux——开机重启、用户登录注销、用户管理、运行级别、帮助指令

目录 关机&重启命令 用户登录&注销 用户管理 用户的添加和删除 查询用户信息指令 切换用户 查看当前登录用户 用户组 用户和组相关的文件 运行级别 基本介绍 设置默认运行级别 ​编辑​编辑 找回root密码 帮助指令 关机&重启命令 用户登录&注销…

Linux工具篇:gdb(调试工具)+ makefile(自动化构建工具)

目录 前言&#xff1a; Linux调试器-gdb使用&#xff1a; Linux项目自动化构建工具-make/Makefile&#xff1a; 问题&#xff1a; 为什么makefile对最新的可执行程序&#xff0c;默认不想不想重新形成呢&#xff1f; make是如何知道到我的程序需要被编译的呢&#xff1f; …

监控系统怎样做?

监控类型自底向上分为资源监控、服务监控和业务监控。希望打造公司级的监控系统最好的时机是系统规划时&#xff0c;如果把监控设计往后放&#xff0c;将会面临一个巨大的难题&#xff1a;推行和现有不兼容的规范。 三种监控类型 资源监控 这个相对简单&#xff0c;随着k8s的兴…

【个人笔记】685. 冗余连接 II 的解释(并查集)

一棵树有n个点和n条边&#xff0c;返回一条能删除的边&#xff0c;使得剩下的图是有 n 个节点的有根树。 解释&#xff1a; 注意不冗余的有根树的特性&#xff01;**根节点入度为0&#xff0c;其余结点只有一个入度&#xff01;**所以冗余的两种情况如下&#xff1a; &#xff…

芯片基础 | Verilog仿真平台及数字逻辑仿真(上)

被测试器件DUT是一个二选一多路器,测试程序(testbench)提供测试激励及验证机制 Testbench使用行为级描述,DUT采用门级描述 下面将给出Testbench的描述、DUT的描述及如何进行混合仿真(行为级+门级) DUT (Device Under Test) module mux2_1(//Port declarations 端口声明outp…

Linux常见配置

linux 常见配置 一、配置固定IP, 主机名映射二、配置环境变量三、vim配置四、ssh配置 一、配置固定IP, 主机名映射 1、修改主机名 hostnamectl set-hostname xxx2、Centos配置固定IP 使用vim编辑/etc/sysconfig/network-scripts/ifcfg-ens33文件&#xff0c;填入下图信息 …

AI伦理之舟:航行于隐私、公正与真实的海域

&#x1f308;所属专栏&#xff1a;【其它】✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的点…

数据编织 VS 数据仓库 VS 数据湖

目录 1. 什么是数据编织?2. 数据编织的工作原理3. 代码示例4. 数据编织的优势5. 应用场景6. 数据编织 vs 数据仓库6.1 数据存储方式6.2 数据更新和实时性6.3 灵活性和可扩展性6.4 查询性能6.5 数据治理和一致性6.6 适用场景6.7 代码示例比较 7. 数据编织 vs 数据湖7.1 数据存储…

Linux-CentOS7忘记密码找回步骤

虚拟机版本 一、进入开机页面&#xff0c;先按上下&#xff08;↑↓&#xff09;键&#xff0c;以免系统自动启动。 二、按“e”键进入编辑页面,找到如下图位置&#xff0c;输入&#xff1a;init/bin/sh 按CTRLX 进入单用户模式。 三、 输入 mount -o remount,rw / 然后按 ent…

ctfshow-web入门-php特性(web127-web131)

目录 1、web127 2、web128 3、web129 4、web130 5、web131 1、web127 代码审计&#xff1a; $ctf_show md5($flag); 将 $flag 变量进行 MD5 哈希运算&#xff0c;并将结果赋值给 $ctf_show。 $url $_SERVER[QUERY_STRING]; 获取当前请求的查询字符串&#xff08;que…

js继承之构造函数继承

最近在看js红宝书&#xff0c;学到了继承这一章节&#xff0c;看到了下图这段代码根据自己理解不明白为什么两次实例的colors值不一样 又是自己画图又是查找资料看别人如何理解的&#xff0c;今天才按自己的理解搞明白为啥。可能我的理解也是有偏差错误的&#xff0c;希望佬可以…

爬虫(一)——爬取快手无水印视频

前言 最近对爬虫比较感兴趣&#xff0c;于是浅浅学习了一些关于爬虫的知识。爬虫可以实现很多功能&#xff0c;非常有意思&#xff0c;在这里也分享给大家。由于爬虫能实现的功能太多&#xff0c;而且具体的实现方式也有所不同&#xff0c;所以这里开辟了一个新的系列——爬虫…

“卓越级”!火山引擎边缘云持续推动行业标准与生态建设,获多项权威认可

7月18日&#xff0c;由中国通信标准化协会主办的第四届云边协同大会暨首届分布式算力论坛在北京成功召开&#xff0c;大会聚焦算力多元泛在化发展趋势及“人工智能”前沿探索&#xff0c;围绕行业技术标准、行业前沿实践、行业发展规划等主题方向发布了诸多成果、标杆、计划等。…

ts报错|| Warning: Failed prop type:xxx but its value is `undefined`

场景 分析 可选链(?.) 可选链操作符允许你安全地访问对象的嵌套属性&#xff0c;即使其中间的一个属性可能不存在也不会抛出错误。如果globalAlertDetail是一个对象并且它有isShow属性&#xff0c;那么globalAlertDetail?.isShow会返回该属性的值。如果globalAlertDetail不…