草庐IT

微信小程序学习第5天——页面导航(声明式与编程式导航)与页面事件(上拉与下拉刷新)

离奇6厘米 2024-01-03 原文

一、页面导航

1、导航方式

小程序的2种页面导航方式:①声明式导航编程式导航

区别声明式导航编程式导航
跳转方式点击 <navigator>组件实现页面跳转调用小程序的导航API实现页面跳转
导航到tabBar页面指定url和open-type属性值为switchTabopten-type属性可以省略调用wx.switchTab()方法
导航到非tabBar页面指定url属性和open-type属性值为navigate调用 wx.navigateTo() 方法
后退导航指定open-type属性值为navigateBackdelta属性的值必须为数字调用 wx.navigateBack() 方法

编程式导航wx.switchTab(object)wx.navigateTo(object)方法中Object参数对象的属性列表

属性类型是否必选说明
urlstring跳转路径,可带参数
successfunction调用成功的回调
failfunction调用失败的回调
completefunction不论成功是否哦都会执行

注意点:声明式导航在后退到上一页时,可以省略delta属性,因为其默认值是1

2、导航传参

不论声明式导航还是编程式导航都可以传参
① 参数与路径之间使用 ? 分隔 ② 参数键与参数值用 = 相连 ③ 不同参数用 & 分隔

<navigator url="/pages/detail/detail?id=1&name=zs"></navigator>

3、接收参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到

onLoad:function(options) {
	console.log(options)
}

4、案例

// .wxml
<view class="container">
<!-- 跳转到tabBar -->
<button bindtap="btnHome">编程式导航跳转到首页</button>
<navigator url="/pages/home/home" open-type="switchTab">声明式导航跳转到首页</navigator>
<!-- 跳转到非tabBar -->
<button bindtap="btnDetail">编程式导航跳转到详情页</button>
<navigator url="/pages/detail/detail">声明式导航跳转到详情页</navigator>
<!-- 带参数 -->
<navigator url="/pages/detail/detail?name=zs">带参数跳转</navigator>
</view>

// .js
Page({
  data: {
    querys:{}
  },
  btnHome(){
    wx.switchTab({
      url: '/pages/home/home'
    })
  },
  btnDetail(){
    wx.navigateTo({
      url: '/pages/detail/detail',
    })
  },

// .js(接收参数的组件)
  onLoad(options) {
    console.log(options)
  },
})

二、页面事件

全局开启刷新:在 app.json 的 window 节点中;局部开启刷新:在页面的 .json 配置文件中
在实际开发中,一般推荐使用局部下拉刷新

1、下拉刷新

《1》开启下拉刷新:enablePullDownRefresh属性

enablePullDownRefresh: true;

《2》停止下拉刷新:调用 wx.stopPullDownRefresh()方法

《3》监听下拉刷新事件:onPullDownRefresh() 函数

《4》配置下拉刷新的样式
窗口的背景颜色:设置backgroundColor属性

backgroundColor : #000;

下拉刷新 loading 的样式:设置backgroundTextStyle属性

 backgroundTextStyle:dark / light;

2、上拉触底

《1》监听上拉触底事件: onReachBottom() 函数

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

3、显示Loading提示框

《1》开启:调用wx.showLoading()方法

 wx.showLoading({
    title: '数据加载中',  // 提示的内容
  })

《2》关闭:调用 wx.hideLoading()方法

三、案例练习

需求:上拉触底(根据接口生成随机背景颜色,添加loading提示效果,对上拉触底进行节流处理)


.WXML代码

<view class="container">
  <view wx:for="{{arrList}}" wx:key="id" style="background-color:rgba({{item}});">
  <text>{{item}}</text>
</view>
</view>

.WXSS代码

.container {
  text-align: center;
  padding: 0;
}
.container view {
  width: 100%;
  margin-bottom: 20rpx;
  height: 200rpx;
  line-height: 200rpx;
}

.JS代码

Page({
  data: {
    arrList:[],
    isloading:false, // 定义节流阀
  },

  // 封装一个获取随机颜色的函数
  getColor(){
  	// 开启节流阀
    this.setData({
      isloading:true
    })
    wx.showLoading({
      title: '数据加载中',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
          arrList:[...this.data.arrList,...res.data.data]
        })
      },
      complete:()=>{
        wx.hideLoading();
        // 关闭节流阀
        this.setData({
          isloading:false
        })
      }
    })
  },

  onLoad(options) {
    this.getColor()
  },
   // 页面上拉触底事件的处理函数
  onReachBottom() {
  		// 判断节流阀状态
      if(this.data.isloading) return;
      this.getColor();
  }
})

有关微信小程序学习第5天——页面导航(声明式与编程式导航)与页面事件(上拉与下拉刷新)的更多相关文章

  1. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin,我在Rails3应用程序的应用程序中有一个目录管理,其中包含模型和页面的声明。时不时地我也有一个类,当那个类有一个常量时,就像这样:classFooBAR="bar"end然后,我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗? 最佳答案 在纯Ruby中:classA

  2. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  3. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  4. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  5. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  8. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  9. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  10. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行,我想让它们一个接一个地显示,但如果表格不适合当前页面,请将其放在下一页,然后继续。我已将表格放入事务中,以便我可以回滚然后打印它(如果高度适合当前页面),但我如何获得表格高度?我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

随机推荐