wx小程序-02 生命周期以及页面跳转
2020-09-01 本文已影响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() },