美文网首页
6.页面跳转

6.页面跳转

作者: LucXion | 来源:发表于2023-10-17 23:57 被阅读0次
组件式 navigator:
<!-- 
    声明式导航 navigator 组件
    切换tab页面    设置 open-type="switchTab"
    跳转路由 入栈 不设置 open-type
    url 为 app.json 内的页面路由,并且以 / 开头
 -->
<navigator class="nav-style" open-type="switchTab" url="/pages/index/index">TabSwitchToIndex</navigator>
编程式跳转

切换Tab页面

// 绑定事件 wx.switchTab
tabChange() {
        wx.switchTab({
            url: '/pages/index/index',
        })
    }

跳转路由,压栈

// 绑定事件 
todetal(event) {
      // 支持类似 swift 中的元组,但是是 {} 大括号声明
        const { lhindex,lhtitle } = event.target.dataset
        console.log(lhindex + lhtitle)
        wx.navigateTo({
            // 不携带参数的跳转,可以用单引号 ',携带参数的跳转,需要用反单引号 `
            url: `/pages/detail/detail?title=${lhtitle}`,
        })
    }
// 入参 data-自定义字段(不支持驼峰命名,即便使用驼峰命名,接收参数时,key自动转换成全小写)
<button bind:tap="todetal" data-lhindex="{{index}}" data-lhtitle="{{item.title}}">clickToDetal</button>

// 出参 页面生命周期函数中的固定参数
     /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        const title = options.title
        console.log(options)
        this.setData({
            title: title
        })
    } 

对比输入框的入参、出参

<input class="productM" type="num" bindinput="InputEvent" value="{{product.num}}"/>
InputEvent(event){event.detail.value}

相关文章

网友评论

      本文标题:6.页面跳转

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