• 技术文章 >web前端 >uni-app

    uniapp如何跳转页面传值

    coldplay.xixicoldplay.xixi2020-12-17 10:23:58原创894

    uniapp跳转页面传值的方法:首先给点击事件传入id;然后Methods中写方法,代码为【uni.navigateTo({url:'opportunity-form?id='+id})】;最后在详情页接收参数。

    本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。

    推荐(免费):uni-app开发教程

    uniapp跳转页面传值的方法:

    首先介绍最原始的跳转方法,类似于html中的 a 标签,不过在uniapp中需要将 a 标签换成

    <navigator url='跳转的地址'>……</navigator>

    下面我们来重点介绍下跳转传值的方法

    1、给点击事件传入id

    <view @tap="toOpportnity(item.id)">转商机</view>;

    2、Methods中写方法

    toOpportnity(id){
    uni.navigateTo({        //点击跳转的方法
    url:'opportunity-form?id='+id     //需要跳转的页面路径,使用问号进行id的传值,然后再拼接一个要传入的id//对象传参方式 url:'../../pages/disabled/subsidie?listObj=' + encodeURIComponent(JSON.stringify(obj))
    })
    }

    3、详情页接收参数

    写一个onLoad函数
    onLoad(options){    //传入的参数名称,可自行修改
    // console.log(options);    查看传入的id值
     
    对象传参的接收方法
    //this.leadobj(上个页面传过来的对象名称,即?后面的那个名称) = JSON.parse(decodeURIComponent(options.leadobj));   
    }

    单个参数的接收,这里使用id来进行介绍

    首先要把传递过来的id进行赋值

    请求接口,接口的url地址后面要加上传递过来的id【/${this.id}/】

    完整步骤如下:

    onLoad(options){
    this.id = options.id;
    console.log('传过来的id值为:' + options.id);
    let that = this
    uni.request({
    url:`${this.$serverUrl}/opportunity/${this.id}/`,
    header:{
    'Authorization': this.uerInfo.token
    },
    success(res){
    console.log(res)
    that.opportunity = res.data;
    }
    })
    }

    相关免费学习推荐:php编程(视频)

    以上就是uniapp如何跳转页面传值的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:uniapp 跳转页面
    上一篇:如何解决uniapp显示乱码问题 下一篇:uniapp 如何做会动的图标
    大前端线上培训班

    相关文章推荐

    • vue.js路由this.route.push跳转页面不刷新怎么办• jquery中怎么跳转页面• vue文件如何实现跳转页面• uniapp如何实现跳转页面回传数据

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网