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

简介: 低代码可视化工具-uniapp页面跳转传参-代码生成器

uniapp页面跳转传参

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


页面跳转并传参

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

接收参数

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


循环绑定传参数

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

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


循环传参

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



页面接参

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


保存源码至本地

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


简单传参源码

<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>


目录
相关文章
|
1月前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
43 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
53 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
39 0
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
31 0
|
2月前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
42 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
67 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
87 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
117 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
120 7