微信小程序学习(02)

页面导航 - 声明式导航

1. 导航到 tabBar 页面

        tabBar 页面指的是被配置为 tabBar 的页面。 在使用<navigator> 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:

⚫ url 表示要跳转的页面的地址,必须以 / 开头;

⚫ open-type 表示跳转的方式,必须为 switchTab

2. 导航到非 tabBar 页面

        非 tabBar 页面指的是没有被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:

⚫ url 表示要跳转的页面的地址,必须以 / 开头;

⚫ open-type 表示跳转的方式,必须为 navigate  

注意:为了简便,在导航到非 tabBar 页面时,open-type="navigate" 属性可以省略。

3. 后退导航

        如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:

⚫ open-type 的值必须是 navigateBack,表示要进行后退导航;

⚫ delta 的值必须是数字,表示要后退的层 

注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1

 页面导航 - 编程式导航

页面导航 - 导航传参 

 

页面事件 - 下拉刷新事件 

        下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为

启用下拉刷新有两种方式:

① 全局开启下拉刷新 ⚫ 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true ② 局部开启下拉刷新 ⚫ 在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true

在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效

在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口 的样式,其中:

⚫ backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值

⚫ backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light

监听下拉刷新事件

在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。 例如,在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1

 

停止下拉刷新的效果

        当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下 :

 onPullDownRefresh: function () {console.log("下拉刷新");this.setData({count: 0})wx.stopPullDownRefresh()},

页面事件 - 上拉触底事件

        上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。 

监听页面的上拉触底事件

        在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。

/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log("上拉触底说的");},

 配置上拉触底距离

        上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。 可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。 小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【每日一题】从数量最多的堆取走礼物

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;排序方法二&#xff1a;优先队列 其他语言python3 写在最后 Tag 【优先队列】【排序】【数组】【2023-10-28】 题目来源 2558. 从数量最多的堆取走礼物 ​ 题目解读 执行 k 次操作&#xff0c;每次从数量最多的堆中取…

在docker中创建EMQX 加数据卷

1、从虚拟容器中复制出来文件 docker run --rm emqx/emqx:5.3.0 sh -c cd /opt/emqx && tar -c etc | tar -C $PWD -x 2、将这三个文件夹分别赋予最高权限&#xff0c;也可以777可以755 chmod -R 777 data chmod -R 777 etc chmod -R 777 log 3、创建容器代码 docke…

Compose 自定义 - 绘制 Draw

一、概念 所有的绘制操作都是通过调整像素大小来执行的。若要确保项目在不同的设备密度和屏幕尺寸上都能采用一致的尺寸&#xff0c;请务必使用 .toPx() 对 dp 进行转换或者采用小数尺寸。 二、Modifier 修饰符绘制 官方页面 在修饰的可组合项之上或之下绘制。 .drawWithCon…

Spring Boot 使用 Disruptor 做内部高性能消息队列

这里写自定义目录标题 一 、背景二 、Disruptor介绍三 、Disruptor 的核心概念3.1 Ring Buffer3.2 Sequence Disruptor3.3 Sequencer3.4 Sequence Barrier3.5 Wait Strategy3.6 Event3.7 EventProcessor3.8 EventHandler3.9 Producer 四、案例-demo五、总结 一 、背景 工作中遇…

第八节——Vue渲染列表+key作用

一、列表渲染 vue中使用v-for指令进行列表 <template><div><!-- item 代表 当前循环的每一项 --><!-- index 代表 当前循环的下标--><!-- 注意&#xff1a;必须要加key--><div v-for"(item, index) in arr" :key"index"…

苹果秋季发布会官宣,新款Mac将搭载M3芯片,来势迅猛!

苹果宣布将于 10 月 31 日上午 8 点&#xff08;北京时间&#xff09;举行发布会&#xff0c;这次发布会的主题是「来势迅猛」&#xff0c;旨在为全球的苹果粉丝和科技爱好者带来令人期待的新品发布。这次发布会引人瞩目&#xff0c;因为它将聚焦在 Mac 系列产品以及全新的 M3 …

Vue3.3指北(三)

Vue3.3指北 1、Vue2和Vue31.1、 Vue2 选项式 API vs Vue3 组合式API1.2、Vue3的优势 2、组合式API - setup2.1、setup选项2.2、setup中写代码的特点2.3、<script setup>语法糖2.4、props和context 3、组合式API - reactive和ref函数3.1、reactive3.2、ref3.3、reactive 对…

使用VisualStudio生成类图结构图for高效阅读代码

使用VisualStudio高效阅读代码 前言相关准备导入工程利用VisualStudio生成类图&#xff0c;结构体调用关系利用EnterpriseArchitect(EA)画时序图 前言 目前市面上代码阅读的IDE工具非常丰富&#xff0c;也各有千秋。由于工作经历原因&#xff0c;研发机经历过windows、Mac、Li…

【可变形注意力(1)】Multi-scale Deformable Attention Transformers 多尺度变形注意力

文章目录 前言论文 《Deformable DETR: Deformable Transformers for End-to-End Object Detection》的多尺度变形注意力的解读DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION **2.** Deformable Attention ModuleDeformable Attention Module 3. Multi-Scale Defor…

鼎汉电源模块维修DHXD-TE1直流屏充电模块

鼎汉电源模块维修常见系列包括&#xff1a;DHXD-E&#xff0c;DHXD-H1&#xff0c;DHXD-H2&#xff0c;DHXD-H3&#xff0c;DHXD-H4等系列模块维修 通信电源维修品牌&#xff1a;英可瑞,许继,艾默生,通合,动力源,九洲,华隆,合欣,泰坦等 直流屏模块故障和解决办法&#xff1a; …

统计学习方法 支持向量机(下)

文章目录 统计学习方法 支持向量机&#xff08;下&#xff09;非线性支持向量机与和核函数核技巧正定核常用核函数非线性 SVM 序列最小最优化算法两个变量二次规划的求解方法变量的选择方法SMO 算法 统计学习方法 支持向量机&#xff08;下&#xff09; 学习李航的《统计学习方…

【STM32】STM32中断体系

一、STM32的NVIC和起始代码中的ISP 1.NVIC(嵌套向量中断控制器) (1)数据手册中相关部分浏览 (2)地址映射时0地址映射到Flash或SRAM (3)中断向量表可以被人为重新映射&#xff0c;一般用来IAP中 (4)STM32采用一维的中断向量表 (5)中断优先级设置有点复杂&#xff0c;后面细说 1…