专栏首页编程微刊uniapp带参数跳转,新页面接收参数

uniapp带参数跳转,新页面接收参数

1:index.vue的页面,在按钮上绑定点击事件,将所要传递的参数放在点击事件的方法里面。

<text @click="details(item.id)"></text>

2:进入methods,将参数放在方法里面,并且在url跳转路径后面进行拼接。

details(id) {
                uni.navigateTo({
                    url: "details?id="+id,
                });
            },

3:在pages里面新建一个details.vue页面,接收index.vue传过来的参数。

4:在onLoad里面打印一下接受到的参数

onLoad(option) {
            console.log(option.id)
            
        },

5:index.vue页面的参考代码

<template>
    <view>
        <view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index">
            <text @click="details(item.id)">{{item.id}} {{item.name}}</text>                        
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                fenecList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: "../../static/test.json",
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.fenecList = res.data.info;
                    },
                });
            },          
            details(id) {
                uni.navigateTo({
                    url: "details?id="+id,
                });
            },
            
        },
    }
</script>
<style>
</style>

details.vue参考的代码

<template>
    <view>      
    </view>
</template>
<script>
    export default {
        data() {
            return {                
            };
        },
        onLoad(option) {
            console.log(option.id)
            this.getList(option.id);
        },
        methods: {
            getList(id) {
                uni.request({
                    url: "xxx",
                    method: 'get',
                    dataType: 'json',
                    data: {
                        "id":"id",
                    },              
                    success: (res) => {                 
                    },
                });
            },

            
        },
    }
</script>
<style>
</style>

test.json

{
    "retCode": 1,   
    "info": {
        
        "configName": "家庭作业",       
        "fences": [{
            "id": 1,
            "name": "测试区域一"             
        },{
            "id": 2, 
            "name": "测试区域二"             
        },{
            "id": 3, 
            "name": "测试区域三"             
        },{
            "id": 4, 
            "name": "测试区域四"             
        }]
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bootstrap+jQuery实现卡片标签样式的分页

    很多人问我为什么要写这么多的博客,其实回想起从前,刚刚工作的那会,我也是什么都不会,每天遇到难题的时候只能打开百度,搜索关键词,看看网上的前辈有没有遇到和我一样...

    王小婷
  • 小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页

    王小婷
  • bootstrap table点击修改按钮给弹框赋值

    王小婷
  • myBatis实例

    用户1112962
  • 面试题|无索引如何删除亿级数据?

    存在索引的情况下就比较简单,直接利用索引进行删除,写一个for 循环语句 每次删除500行,每次判断delete 影响的行数可以累加计算删除了多少行,直到删除结...

    [3306 Pai ] 社区
  • 详细分析Python可变对象和不可变对象

    在 Python 中一切都可以看作为对象。每个对象都有各自的 id, type 和 value。

    砸漏
  • 省市县,区的查询(通过区开始)(导出的接口实现)

    wfaceboss
  • Bypass 360主机卫士SQL注入防御(多姿势)

    在服务器客户端领域,曾经出现过一款 360 主机卫士,目前已停止更新和维护,官网都打不开了,但服务器中依然经常可以看到它的身影。

    信安之路
  • python中查看变量内存地址的方法

    本文实例讲述了python中查看变量内存地址的方法。分享给大家供大家参考。具体实现方法如下:

    py3study
  • 【leetcode两题选手】MySQL类题目(八)

    某城市开了一家新的电影院,吸引了很多人过来看电影。该电影院特别注意用户体验,专门有个 LED显示板做电影推荐,上面公布着影评和相关电影描述。

    看、未来

扫码关注云+社区

领取腾讯云代金券