小程序开发 跳转导航

通过wxml跳转

使用navigator跳转，url是跳转目标路径

.wxml

<navigator class="jumpBtn" url="../demo1/demo1">跳转方式一</navigator>

通过js正常跳转

通过点击回调跳转

.wxml

<view class="jumpBtn" bindtap="onClickJump" style="margin-top: 10px;">跳转方式二</view>

.js

// pages/demo3/demo3.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    onClickJump:function (e) {
        wx.navigateTo({
          url: '../demo1/demo1',
        })
    }
})

跳转到一个指定的TabBar页面

    click() {
        // 跳转到一个指定的tabBar页面
        wx.switchTab({
            url: "/pages/index/index",
        });
    }

替换当前路径到指定页面

    click2() {
        //替换当前路径到指定页面
        wx.redirectTo({
            url: "/pages/index/index",
        });
    },

删除全部路径到指定页面

    click3() {
        //删除全部路径到指定页面
        wx.reLaunch({
            url: '/pages/index/index',
        })
    }

跳转路径传参

 wxml

        <view wx:for="{{childList}}"  wx:for-item="item" wx:for-index="index" class="for-container">
            <view class="child-container" bindtap="jumpChat" data-operation="{{index}}">
            </view>

js

在路径结尾添加？ 然后拼接参数。 请注意这里的 ` 号，写习惯了java会以为键盘回车键旁边的单引号与双引号，这个其实是键盘Tab键上面的键的引号

    jumpChat(e){
        const index = e.currentTarget.dataset.operation
        const url = this.data.childList[index].headImageUrl
        wx.navigateTo({
          url: `/pages/chat/chat?headImageUrl=${url}`,
        })
    },

目的地的js里获取传参

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var obj = options;
        this.setData({
            childeadImage: obj.headImageUrl,
        });
    },

 

 

End