微信小程序 - 导航 、wxs及生命周期函数

这篇具有很好参考价值的文章主要介绍了微信小程序 - 导航 、wxs及生命周期函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导航
声明式导航

使用<navigator></navigator>标签

属性 类型 默认值 必填 说明
target string self 在哪个目标上发生跳转,默认当前小程序
url string 当前小程序内的跳转链接
open-type string navigate 跳转方式

target参数

属性值 说明
self 当前小程序
miniProgram 其它小程序

open-type参数

属性值 说明
navigate 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
redirect 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
reLaunch 关闭所有页面,打开到应用内的某个页面
navigateBack 关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈,决定需要返回几层
exit 退出小程序,target="miniProgram"时生效
<!-- navigate 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 -->
<!-- switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 -->
<navigator url="../index/index" open-type="navigate">去非tabBar页面</navigator>

<!-- <navigator url="../mian/mian" open-type="switchTab">去tabBar页面</navigator> -->
编程式导航
<button type="primary" plain bind:tap="goMain">跳转到Main</button>

js中设置

 wx.navigateTo({
      url: '../mian/mian?id=1001&name=zhangsan',
      success: (res) => {
        console.log("跳转Main", res);
      }
    })

微信小程序 - 导航 、wxs及生命周期函数,微信小程序,小程序

wxs

WXS(WeiXin Script)是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。

  1. 使用module.exports暴露方法(函数)
  2. module=“m1” wxs设置名称
<view>{{m1.toUpper(msg)}}</view>
<view>{{m2.toLower(msg)}}</view>
<wxs module="m1">
    module.exports.toUpper = function (str) {   
    return str.toUpperCase();
    }
</wxs>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
上拉触底、下拉刷新

1.开启下拉刷新、设置下拉触底的高度

微信小程序 - 导航 、wxs及生命周期函数,微信小程序,小程序

2.在js文件中设置处理函数文章来源地址https://www.toymoban.com/news/detail-796657.html

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
onPullDownRefresh() {
    console.log("下拉刷新");
    this.setData({
        colorList: this.getColor()
    })

    wx.stopPullDownRefresh();  //停止下拉刷新的动作

},
    /**
   * 页面上拉触底事件的处理函数
   */
    onReachBottom() {
        console.log("上拉触底");
        this.setData({
            colorList: [...this.data.colorList, ...this.getColor()]
        })
    },

到了这里,关于微信小程序 - 导航 、wxs及生命周期函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中的App、Page、Component的生命周期函数

    有点混乱的官方文档 字面意义上说,生命周期就是指一个对象自身的生老病死; 在程序运行上也可以这么理解,程序也是对象,也有“生老病死”; 程序自身从创建到销毁的过程中,运行到特定的阶段,会触发特定的函数,这些函数,我们就称之为生命周期函数。 每个生命

    2024年02月09日
    浏览(35)
  • 微信小程序中的所有生命周期钩子函数及其使用方法

    onLaunch(options) :小程序初始化时触发,全局只触发一次。 onShow(options) :小程序启动或从后台进入前台显示时触发。 onHide() :小程序从前台进入后台时触发。 onError(error) :小程序发生脚本错误或 API 调用失败时触发。 onLoad(options) :页面加载时触发,可以获取页面参数。 onS

    2024年02月09日
    浏览(41)
  • 【小程序 - 基础】页面导航、页面事件、生命周期、WXS脚本_04

    目录 一、页面导航 1. 什么是页面导航 2. 小程序中实现页面导航的两种方式 2.1 声明式导航  2.1.1 导航到 tabBar 页面  2.1.2 导航到非 tabBar 页面 2.1.3 后退导航 2.2 编程式导航 2.2.1 导航到 tabBar 页面 2.2.2 导航到非 tabBar 页面 2.2.3 后退导航  2.3. 导航传参 2.3.1 声明式导航传参

    2024年02月06日
    浏览(31)
  • 6-微信小程序导航跳转、下拉触底、生命周期

    navigator 导航组件 官网传送门 导航到tabBar页面 在使用 navigator 跳转到tabbar页面需指定 url 和 open-type 属性, open-type 必须为 switchTab 例:从home页跳转到message wxml 导航到非tabBar页面 在使用 navigator 跳转到非tabbar页面需指定 url 和 open-type 属性, open-type 必须为 navigate 例:从home页跳

    2024年01月23日
    浏览(42)
  • Ionic4 生命周期钩子函数和angular生命周期钩子函数介绍

    Ionic 4(以及之后的 Ionic 版本)使用了 Angular 生命周期钩子,因为 Ionic 是基于 Angular 构建的。因此,Ionic 4 中的生命周期与 Angular 组件生命周期非常相似。以下是一些常见的 Ionic 4 生命周期钩子: ionViewDidLoad : 在页面加载完成后触发。通常用于执行一次性的初始化任务。不推

    2024年02月07日
    浏览(50)
  • 什么是Vue中的生命周期钩子函数?有哪些主要的生命周期钩子函数?如何监听DOM事件?

    Vue中的生命周期钩子函数是指在Vue实例创建、数据绑定、组件挂载等生命周期阶段中,可以执行一些特定操作的函数。这些函数在Vue实例的不同生命周期阶段被调用,可以帮助开发者更好地控制Vue实例的行为。 Vue的生命周期钩子函数包括: beforeCreate :在Vue实例创建之前调用

    2024年02月12日
    浏览(56)
  • Vue生命周期函数(详解)

    目录  生命周期图 生命周期函数 beforeCreate和created的区别 beforeCreate创建前应用场景  created创建后应用场景 beforeMount和mounted的区别  beforeMount挂载前应用场景  mounted挂载后应用场景  beforeUpdate和updated的区别  beforeUpdate更新前应用场景  updated更新后应用场景  beforeDestroy和des

    2024年02月13日
    浏览(45)
  • [Angular 基础] - 生命周期函数

    之前的笔记: [Angular 基础] - Angular 渲染过程 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 以上为静态页面,即不涉及到跨组件交流的内容 以下涉及到组件内的沟通,从这开始数据就“活”了 [Angular 基础] - 自定义事件 自定义属性 [Angular 基础]

    2024年02月20日
    浏览(41)
  • react17:生命周期函数

    挂载时 更新时 setState触发更新、父组件重新渲染时触发更新 forceUpdate触发更新 卸载时 react(v17.0.2)的生命周期图谱如下。  相较于16版本,17版本生命周期函数有如下变化: componentWillMount() componentWillUpdate() componentWillReceiveProps() +getDerivedStateFromProps(props,state) +getSnapshotBeforeUp

    2024年02月11日
    浏览(44)
  • 【Unity函数执行顺序(Unity脚本生命周期函数)】

    温故而知新,下面我将介绍Unity入门需要了解的常用生命周期函数 生命周期函数就是该脚本对象依附的GameObject对象从出生到消亡整个生命周期中 会通过反射自动调用的一些特殊函数。 下面是对各个函数解锁 a.调用情况: 1.在加载场景时初始化包含脚本激活状态的GameObject时。

    2023年04月23日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包