微信小程序(五十八)分步表单多页面传值

news2024/10/7 6:46:46

注释很详细,直接上代码

上一篇

新增内容:
1.分步表单传值
2.伪数据生成

源码:

app.json

{
  "pages": [
    "pages/index/index",
    "pages/building/building",
    "pages/room/room",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  },

  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",

  "requiredPrivateInfos": [
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于为您提供准确的服务"
    }
  }
}

index.wxml

<!-- cell-group-root 开放式样式类 -->
<van-cell-group 
  title="小区"
  custom-class="cell-group-root"
  >
  <!-- custom-class 开放性样式类 
       is-link 箭头(默认向右)
       ?point={{ item.title }}将标题当数据传到下一个界面-->
  <van-cell
      wx:for="{{ points }}" 
      wx:key="*this" 
      title="{{ item.title }}" 
      link-type="navigateTo"
      url="/pages/building/building?point={{ item.title }}" 
      is-link 
      custom-class="cell-root"
  />
</van-cell-group>

index.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: #99CCFF !important;
  border-radius: 30rpx;
}

index.js

Page({
  data:{
    "points":[//手写点数据
      {
        "title":"蒙德小区"
      },
      {
        "title":"璃月小区"
      },
      {
        "title":"稻妻小区"
      },
      {
        "title":"须弥小区"
      },
      {
        "title":"至冬小区"
      },
      {
        "title":"枫丹小区"
      },
      {
        "title":"纳塔小区"
      }
    ]
  }
})

building.wxml

<view class="building">
  <van-cell-group 
  title="楼号"
  custom-class="cell-group-root"

  >
  <!-- 以数字size作为循环体则为0~size-1 -->
    <van-cell
      custom-class="cell-root"
      wx:for="{{size}}"
      wx:key="*this"
      title="{{ point + (item + 1) + type }}"
      link-type="navigateTo"
      url="/pages/room/room?point={{ point }}&building={{ (item + 1) + type }}"
      is-link
    />
  </van-cell-group>
</view>

building.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: rgba(32, 128, 247,0.5) !important;
  border-radius: 30rpx;
}


building.js

Page({
  data: {
    size: 0,
    point: '',
    type: '',
  },

  // 获取地址参数
  onLoad({ point }) {
    // 生成假数据
    this.fake(point)
  },

  fake(point) {
    // 生成楼栋数(用于上课)
    const size = Math.floor(Math.random() * 4) + 3
    // 楼栋名称(xx小区 / xx栋)
    const type = size > 4 ? '号楼' : '栋'
    // 数据渲染(相同名字直接解构赋值!!!so好用!!!)
    this.setData({ size, type, point })
  }
  
})

room.wxml

<van-cell-group  
  title="房间号"
  custom-class="cell-group-root"
  >
  <van-cell
    custom-class="cell-root"
    wx:for="{{rooms}}"
    wx:key="*this"
    title="{{ point + building + item }}"
    link-type="navigateTo"
    url="xxx"
    is-link
  />
</van-cell-group>

room.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: rgba(32, 128, 247,0.5) !important;
  border-radius: 30rpx;
}

room.js

Page({
  data: {
    point: '',
    building: '',
    rooms: [],
  },
  onLoad({ point, building }) {
    // 创建房间
    this.fake(point, building)
  },
  fake(point, building) {
    // 生成多少个房间
    const size = Math.floor(Math.random() * 5) + 4
    const rooms = []
    for (let i = 0; i < size; i++) {

      // 楼层号生成 1 ~ 20(温馨提醒:1. random生成,2.floor向下取整)
      const floor = Math.floor(Math.random() * 19) + 1

      // 具体的房间号生成 1 ~ 3
      const No = Math.floor(Math.random() * 2) + 1

      //用空气连接
      const room = [floor, 0, No].join('')
      // 检测是否有重复的房间号
      if (rooms.includes(room)) {
        break
      }

      // 记录生成完整的房间号
      rooms.push(room)
    }
    // 渲染数据
    this.setData({ rooms, point, building })
  }
})

效果演示:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1523103.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

整数和浮点数在内存中是如何存储的?

1.整数在内存中的存储 首先数据在内存中都是以二进制的形式存储的&#xff0c;而整数在内存中也是以二进制的形式存储的&#xff0c;而整数的表示形式有三种&#xff0c;分别是源码&#xff0c;反码&#xff0c;补码&#xff0c;而整数在内存中是以补码的形式存放的。 三种表示…

图文并茂!在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

CTFHUB-web-信息泄漏

题目所在位置&#xff1a;技能树->web->信息泄漏 目录遍历 打开题目&#xff0c;我们进入的是这个页面 翻译过来就是 得到的信息就是&#xff1a;flag要在这些目录里面寻找&#xff0c;我们直接一个一个点开查看就行 发现得到一个flag.txt&#xff0c;点击打开得到flag …

Python之requests实现github模拟登录

文章目录 github 模拟登录前言模拟登录流程抓包操作查看登录表单的内容登录操作 模拟登录操作在 main函数的调用获得 auth_token调用/session接口登录处理检测登录是否成功 总结&#xff1a; github 模拟登录 前言 前面学习了requests模块的基础学习后&#xff0c;接下来做一个…

upload-labs通关方式

pass-1 通过弹窗可推断此关卡的语言大概率为js&#xff0c;因此得出两种解决办法 方法一 浏览器禁用js 关闭后就逃出了js的验证就可以正常php文件 上传成功后打开图片链接根据你写的一句话木马执行它&#xff0c;我这里采用phpinfo&#xff08;&#xff09; 方法二 在控制台…

【高通camera hal bug分析】高通自带相机镜像问题

首先打了两个log&#xff0c;一个是开启镜像的log&#xff0c;还有一个是没有开启镜像的log&#xff0c;如果我们开启镜像以后&#xff0c;观察开启镜像log发现 , 这段代码走的没有任何问题&#xff0c;因为Flip的值等于1了。 关闭镜像log如下&#xff1a; 如果我们不开启镜像…

21 OpenCV 直方图均衡化

文章目录 直方图概念均衡的目的equalizeHist 均衡化算子示例 直方图概念 图像直方图&#xff0c;是指对整个图像像在灰度范围内的像素值(0~255)统计出现频率次数&#xff0c;据此生成的直方图&#xff0c;称为图像直方图-直方图。直方图反映了图像灰度的分布情况。 均衡的目的…

自定义组件

1. 组件 ① 在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建 components -> test 文件夹 ② 在新建的 components -> test 文件夹上&#xff0c;鼠标右键&#xff0c;点击“新建 Component” ③ 键入组件的名称之后回车&#xff0c;会自动生成组件对应的 4 个文件…

JAVA实战开源项目:高校学院网站(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教育教学模块2.4 招生就业模块2.5 实时信息模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 学院院系表3.2.2 竞赛报名表3.2.3 教育教学表3.2.4 招生就业表3.2.5 实时信息表 四、系…

USB打印机改网络打印机

解决传统SMB缺陷可跨平台设备使用。 1、安装deepin 如何安装 – 深度科技社区 2、配置IP地址 vi /etc/network/interfaces && systemctl restart networking 3、安装程序上传到服务器并解压。运行0Dinstalld目录下文件 sh 0Dinstalld/0installdd.sh http://XX.XX.XX…

设计模式在芯片验证中的应用——装饰器

一、装饰器模式 装饰器模式(Decorator)是一种结构化软件设计模式&#xff0c;它提供了一种通过向类对象添加行为来修改类对象的方法&#xff0c;而不会影响同一类的其它对象行为。该模式允许在不修改抽象类的情况下添加类功能。它从本质上允许基类代码对不可预见的修改具有前瞻…

【Vue】Request模块 - axios 封装Vuex的持久化存储

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 Request模块 - axios 封装 使用axios来请求后端接口&#xff0c;一般会对axios进行一些配置&#xff08;比如配置基础地址&#xff0c;请求响应拦截器…

26-Java访问者模式 ( Visitor Pattern )

Java访问者模式 摘要实现范例 访问者模式&#xff08;Visitor Pattern&#xff09;使用了一个访问者类&#xff0c;它改变了元素类的执行算法&#xff0c;通过这种方式&#xff0c;元素的执行算法可以随着访问者改变而改变访问者模式中&#xff0c;元素对象已接受访问者对象&a…

【零基础学习06】嵌入式linux驱动中PWM驱动基本实现

大家好,今天给大家分享一下,如何利用PWM外设来实现LCD背光调节,本次实验使用Linux系统中PWM控制器以及PWM子系统来控制对应的功能。 第一:设备树下PWM控制节点 PWM对应的节点信息如下: pwm3: pwm@02088000 {compatible = "fsl,imx6ul-pwm", "fsl,imx27-pwm…

c语言商品库存管理系统

定制魏:QTWZPW,获取更多源码等 目录 题目 功能概述 数据结构 用户界面 ​编辑 主要函数 数据存储 完整代码 总结 题目 实现一个商品库存管理系统,可以对商品进行入库、出库、删除、修改、查询以及显示所有商品信息的操作。 功能概述 系统包含以下主要功能: 商品…

JS函数知识点(复习)

在 JavaScript&#xff08;JS&#xff09;中使用函数有多种原因&#xff0c;这些原因不仅涉及到代码的组织和可读性&#xff0c;还涉及到代码的可维护性、复用性以及程序的模块化等方面。以下是一些关键的理由&#xff1a; 代码重用&#xff1a;函数允许你将一段代码块封装起来…

探索设计模式的魅力:探索发布-订阅模式的深度奥秘-实现高效、解耦的系统通信

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;并坚持默默的做事。 探索发布-订阅模式的深度奥秘&#xff1a;实现高效、解耦的系统通信 文章目录 一、案例场景&am…

UE5数字孪生系列笔记(二)

智慧城市数字孪生系统 制作流云动画效果 首先添加一个图像在需要添加流云效果的位置 添加动画效果让其旋转 这个动画效果是程序开始就要进行的&#xff0c;所以要在EventConstruct中就可以启动这个动画效果 添加一个一样的图像在这里&#xff0c;效果是从此处进行放大消散 添…

python之自动化(django)

1、安装 我用的是pip install Django 在命令行中安装 然后django-admin startproject autotext&#xff08;在命令行中&#xff09; 这句话是创建一个django 项目 然后切换到你所创建项目的目录下 输入&#xff1a; python manage.py runserver 当你出现以下错误时 You…

高光谱数据应用于植被监测与分析与数据获

1. 常用高光谱数据 (1) 航空成像光谱仪系统 国内系统&#xff1a;MAIS、OMIS-1、OMIS-2、PHI、WHI、LASIS 国外系统&#xff1a;AIS、AVIRIS、TRWIS、GERIS、HYDICEAISA、DAIS、CASI、HYMAP (2) 航天成像光谱仪 Hyperion/EO-1 环境与减灾小卫星星座&#xff08;HJ-1B&…