低代码可视化-uniapp页面跳转传参-代码生成器

diygw

uniapp页面跳转传参
在uni-app中，页面间的跳转和传参是一个常见的需求。uni-app提供了多种页面跳转方式，如uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab、uni.navigateBack等，每种方式适用于不同的场景。以

页面跳转并传参
找到点击事件，直接选择事件跳转页面，如果有扩展参数，直接在附加参数里增加传参，如果不需要传参则不理。





接收参数
在目标页面的onLoad函数中，可以通过options参数获取到传递的数据。工具已经把传过来的参数写到了globalOption里。绑定变量的时候，由于不确定你实际传参传了什么参数，需要你补完整的参数。





循环绑定传参数
比如我们列表的id希望把id传过去，在另外一个页面得到这个id值，然后调用API进行数据cha询，把cha询出来的结果再显示。



找到FLEX进行数据源循环绑定API返回的数据列表数据。



循环传参
点击事件把循环的id值传过去下一个页面



页面接参
这里我们获取传来的id,进行文章详情API进行cha询。然后在界面上再把cha询结果显示出来.






保存源码至本地

直接点击保存源码至本地，即可实现看见列表显示及详情页


查看源码


直接生成的源码如下

[JavaScript] 纯文本查看 复制代码

<template>
        <view class="container container329152">
                <u-form-item class="diygw-col-24" label="标题" prop="title">
                        <u-input :focus="titleFocus" placeholder="请输入提示信息" v-model="title"></u-input>
                </u-form-item>
                <text v-show="title == 1" class="diygw-col-24 text-clz">
                        {{ title }}
                </text>
                <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                        <scroll-view scroll-x scroll-with-animation class="flex scroll-view flex-wrap diygw-col-24 justify-center flex13-clz">
                                <view class="flex justify-center flex-nowrap">
                                        <view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex14-clz" @tap="tabSelect(index)">
                                                <view v-if="tabIndex == index" class="flex flex-wrap diygw-col-24 items-center flex8-clz">
                                                        <text class="flex icon1 diygw-col-0 icon1-clz" :class="[item.icon]"></text>
                                                        <text class="diygw-text-line1 diygw-col-0">
                                                                {{ item.title }}
                                                        </text>
                                                </view>
                                                <view v-if="tabIndex != index" class="flex flex-wrap diygw-col-24 items-center flex-clz">
                                                        <text class="flex icon2 diygw-col-0 icon2-clz" :class="[item.icon]"></text>
                                                        <text class="diygw-text-line1 diygw-col-0">
                                                                {{ item.title }}
                                                        </text>
                                                </view>
                                        </view>
                                </view>
                        </scroll-view>
                        <text class="diygw-col-24 text13-clz"> 已绑定组件动态数据，导出源码起效。组件数据在上面一层扩组数据里，可以根据动态API的数据来绑定。使用时可删除此提示 </text>
                </view>
                <view class="flex diygw-col-24">
                        <button @tap="navigateTo" data-type="page" data-url="/pages/user" data-id="1" class="diygw-btn green radius flex-sub margin-xs button-button-clz">跳转页面</button>
                </view>
                <view class="clearfix"></view>
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                //用户全局信息
                                userInfo: {},
                                //页面传参
                                globalOption: {},
                                //自定义全局变量
                                globalData: {},
                                titleFocus: false,
                                title: '',
                                tabIndex: 0,
                                tabDatas: [
                                        { title: '关注', icon: 'diy-icon-home' },
                                        { title: '精选', icon: 'diy-icon-newshot' },
                                        { title: '推荐', icon: 'diy-icon-message' },
                                        { title: '热门', icon: 'diy-icon-my' }
                                ]
                        };
                },
                onShareAppMessage(e) {},
                onShow() {
                        this.setCurrentPage(this);
                },
                onLoad(option) {
                        this.setCurrentPage(this);
                        if (option) {
                                this.setData({
                                        globalOption: this.getOption(option)
                                });
                        }

                        this.init();
                },
                methods: {
                        async init() {},
                        // 调用方法 自定义方法
                        async clickFunction(param) {
                                let thiz = this;
                                console.log(this.title);
                        },
                        tabSelect(index) {
                                this.tabIndex = index;
                                this.showToast('这里可以回调哟');
                        }
                }
        };
</script>

<style lang="scss" scoped>
        .text-clz {
                margin-left: 30rpx;
                padding-top: 10rpx;
                padding-left: 10rpx;
                width: calc(100% - 30rpx - 30rpx) !important;
                padding-bottom: 10rpx;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                margin-right: 30rpx;
                padding-right: 10rpx;
        }
        .flex13-clz {
                margin-left: 10rpx;
                padding-top: 10rpx;
                padding-left: 10rpx;
                width: calc(100% - 10rpx - 10rpx) !important;
                padding-bottom: 10rpx;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                margin-right: 10rpx;
                padding-right: 10rpx;
        }
        .flex14-clz {
                padding-top: 0rpx;
                padding-left: 10rpx;
                padding-bottom: 0rpx;
                padding-right: 10rpx;
        }
        .flex8-clz {
                background-color: #eaeaea;
                padding-top: 10rpx;
                border-bottom-left-radius: 120rpx;
                overflow: hidden;
                color: #ffffff;
                padding-left: 30rpx;
                padding-bottom: 10rpx;
                border-top-left-radius: 120rpx;
                border-top-right-radius: 120rpx;
                border-bottom-right-radius: 120rpx;
                background-image: linear-gradient(90deg, #f761a1 10%, #b61de0 100%);
                padding-right: 30rpx;
        }
        .icon1-clz {
                margin-left: 6rpx;
                margin-top: 6rpx;
                margin-bottom: 6rpx;
                margin-right: 6rpx;
        }
        .icon1 {
                font-size: 32rpx;
        }
        .flex-clz {
                background-color: #eaeaea;
                padding-top: 10rpx;
                border-bottom-left-radius: 120rpx;
                overflow: hidden;
                padding-left: 30rpx;
                padding-bottom: 10rpx;
                border-top-left-radius: 120rpx;
                border-top-right-radius: 120rpx;
                border-bottom-right-radius: 120rpx;
                padding-right: 30rpx;
        }
        .icon2-clz {
                margin-left: 6rpx;
                margin-top: 6rpx;
                margin-bottom: 6rpx;
                margin-right: 6rpx;
        }
        .icon2 {
                font-size: 32rpx;
        }
        .text13-clz {
                margin-left: 10rpx;
                padding-top: 10rpx;
                padding-left: 10rpx;
                width: calc(100% - 10rpx - 10rpx) !important;
                padding-bottom: 10rpx;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                margin-right: 10rpx;
                padding-right: 10rpx;
        }
        .button-button-clz {
                margin: 6rpx !important;
        }
        .container329152 {
        }
</style>