美文网首页wx小程序
wx小程序-02 生命周期以及页面跳转

wx小程序-02 生命周期以及页面跳转

作者: 呆桃冲鸭冲鸭 | 来源:发表于2020-09-01 21:20 被阅读0次

    页面的生命周期:
    页面初次加载时:onLoad,在页面没被销毁之前只会触发1次。
    页面显示时:onShow ,从别的页面返回到当前页面时,都会被调用。
    页面初次渲染完成时:onReady,在页面没被销毁前只会触发1次,在逻辑层可以和视图层进行交互。

    页面显示后,随着用户的操作,还会触发其它的事件:
    页面不可见时:onHide,wx.navigateTo切换到其他页面、底部tab切换时触发。
    返回到其它页时:onUnload,wx.redirectTo或wx.navigateBack使当前页面会被微信客户端销毁回收时触发。

    监听用户下拉动作:onPullDownRefresh,需要在app.json里配置 "enablePullDownRefresh":true。
    页面上拉触底:onReachBottom。可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance。在触发距离内滑动期间,本事件只会被触发一次。
    页面滚动 onPageScroll:监听用户滑动页面事件,参数为 Object,包含 scrollTop 字段,表示页面在垂直方向已滚动的距离(单位px)。
    用户点击右上角分享:onShareAppMessage。只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容。

    页面跳转:
    1.在app.json 中用tabBar 属性设置跳转方式;
    2.在wxml 页使用导航组件 <navigator> 跳转页面;

    <navigator url="/pages/page2/page2">2级页面</navigator>
    <navigator open-type="navigateBack">返回上一页</navigator>
    

    3.在js 中用路由API跳转。

    <button bindtap="toSubPage">跳转</button>
    toSubPage(){   wx.navigateTo({  url: '/pages/page2/page2',  })  },
    <button bindtap="toPage">跳转上一页</button>
    toPage(){  wx.navigateBack()   },
    

    相关文章

      网友评论

        本文标题:wx小程序-02 生命周期以及页面跳转

        本文链接:https://www.haomeiwen.com/subject/kwdvsktx.html