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

注释很详细,直接上代码

新增内容:
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 })
  }
})

效果演示:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初步了解变量

为什么需要变量 初识变量 变量的概念&#xff1a; 内存中的一个存储区域&#xff0c;该区域的数据可以在同一类型范围内不断变化 变量的构成包含三个要素&#xff1a;数据类型、变量名、存储的值 Java中变量声明的格式&#xff1a;数据类型 变量名 变量值 变量的作用&…

学习vue3第五节(reactive 及其相关)

1、定义 reactive() 创建一个响应式代理对象&#xff0c;不同于ref()可以创建任意类型的数据&#xff0c;而reactive()只能是对象&#xff0c;会响应式的深层次解包任何属性&#xff0c;将其标注为响应式 响应式是基于ES6的proxy实现的代理对象&#xff0c;该proxy对象与原对象…

九数分三组

枚举三位数时&#xff0c;不用写三个循环&#xff0c;写出最小和最大数循环就行。在这题里要求三个数中不能有重复的数字&#xff0c;先转换为字符串&#xff0c;再转换为字符数组进行排序&#xff0c;最后比较字符串就可以得出结果。这题把结果和原因调换了一下

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL&#xff0c;再写Redis 图解说明: 这是一幅时序图&#xff0c;描述请求的先后调用顺序&#xff1b; 黄色的线是请求A&#xff0c;黑色的线是请求B&#xff1b; 黄色的…

[Linux][CentOs][Mysql]基于Linux-CentOs7.9系统安装并配置开机自启Mysql-8.0.28数据库

目录 一、准备工作&#xff1a;获取安装包和相应工具 &#xff08;一&#xff09;所需安装包 &#xff08;二&#xff09;安装包下载链接 &#xff08;三&#xff09;在服务器上创建文件夹并上传安装包 二、安装MySql &#xff08;一&#xff09;删除系统自带的mariadb …

到底什么是中台?

1.背景 最近老是听见或看见”中台“的字眼&#xff0c;例如数据中台、业务中台&#xff0c;根本搞不懂是什么&#xff0c;就感觉挺高大尚的。但同时&#xff0c;作为技术人&#xff0c;对于这种可能用到又一无所知的东西&#xff0c;心里是发慌的&#xff0c;因此有了这篇文章。…

unity中实现场景跳转

1&#xff0c;第一步创建2个场景&#xff08;右键资源窗口&#xff0c;名字这里我取的1111和2222&#xff09; 2.添加跳转按钮&#xff08;双击其中一个场景并添加按钮&#xff09; 3.编辑按钮的文字&#xff08;将原本的按钮打开点击里面的text&#xff0c;就可以在右边编辑文…

改进沙猫群优化的BP神经网络ISCSO-BP(时序预测)的Matlab实现

改进沙猫群优化的BP神经网络&#xff08;ISCSO-BP&#xff09;是一种结合了改进的沙猫群优化算法&#xff08;Improved Sand Cat Swarm Optimization, ISCSO&#xff09;和反向传播&#xff08;Back Propagation, BP&#xff09;神经网络的模型&#xff0c;旨在提高时序预测的准…

【大模型API调用初尝试一】智谱AI 通义千问

大模型API调用初尝试一 调用大模型API能干什么智谱AI大模型API调用的过程获取API_KEYGLM_4同步调用GLM_4异步调用文生图大模型API调用 阿里云通义千问API调用过程单轮会话多轮会话 调用大模型API能干什么 大模型的参数非常庞大&#xff0c;功能非常强大&#xff0c;但是训练成…

水肥一体机远程监控解决方案

水肥一体机远程监控解决方案 水肥一体机物联网解决方案&#xff0c;作为现代农业技术的尖端代表&#xff0c;深度融合了物联网、大数据分析以及智能控制等前沿科技手段&#xff0c;为农田灌溉与施肥管理带来了革命性的精准化与智能化升级。该方案的核心理念在于通过实时监测土…

python爬虫实战——小红书

目录 1、博主页面分析 2、在控制台预先获取所有作品页的URL 3、在 Python 中读入该文件并做准备工作 4、处理图文类型作品 5、处理视频类型作品 6、异常访问而被中断的现象 7、完整参考代码 任务&#xff1a;在 win 环境下&#xff0c;利用 Python、webdriver、JavaS…

C/C++链接mysql

下载对应文件 https://dev.mysql.com/downloads/ 选择自己对应的普通进行下载 将下载好的文件上传到机器并解压 tar -zxvf 文件名.tar.gz其中 include 包含所有的方法声明&#xff0c; lib64包含所有的方法实现&#xff08;打包成库&#xff09; 将include文件夹放到/usr/…

zabbix 7.0编译部署教程

zabbix 7.0编译部署教程 2024-03-08 16:50乐维社区 zabbix7.0 alpha版本、beta版本已经陆续发布&#xff0c;Zabbix7.0 LTS版本发布时间也越来越近。据了解&#xff0c;新的版本在性能提升、架构优化等新功能方面有非常亮眼的表现&#xff0c;不少小伙伴对此也已经跃跃欲试。心…

OpenCASCADE开发指南<五>:OCC 内存管理器和异常类

一个软件首先要规定能处理的数据类型&#xff0c; 其次要实现三项最基本的功能——引用管理、内存管理和异常管理。在 OCC 中&#xff0c;这三项功能分别对应基础类中的句柄、内存管理器和异常类。 1 异常类 1. 1 异常类的定义 异常处理机制实现了正常程序逻辑与错误处理的分离…

2024春秋蓝桥杯reverse——crackme01

尝试了下输入没有任何反应 查看——32位——IDA打开 我之前没怎么写过win32&#xff0c;所以我开始在string里面找flag,wrong,right什么的字符&#xff0c;都不行 然后我又在函数里面找main&#xff0c;也什么收获的没有,OK废话完了 在win32里面 关于弹窗的函数&#xff1a;…

移动机器人设计与实践课程进度安排-2023-2024-2

进度安排由人工智能审核制定。 人工智能设计的机器人模型如下&#xff0c;一组三个&#xff1a; 轮式物流小车机器人智慧工厂绘图描述 背景: 绘制一个工厂的大致轮廓&#xff0c;包括工厂大门、围墙和主要的建筑结构。在背景中描绘一些工业设备、生产线和堆放的物料&#xff…

elasticsearch篇

1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在电商网站搜索商品 在百度搜索答案 在打车软件搜索附近…

两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

需求是有两个笔记本&#xff0c;一个笔记本闲置&#xff0c;另一个笔记本是主力本。想将另一个闲置的笔记本连接到主力本上作为拓展屏使用。网上搜了好久&#xff0c;有一些人提到了&#xff0c;也有一些视频但是文章比较少。简单总结一下吧 上述需求有两种方式 第一种&#x…

Purple Pi OH鸿蒙开发板7天入门OpenHarmony开源鸿蒙教程【六】

今天我们来从OpenHarmony简介、环境搭建、创建第一个OpenHarmony项目等方面开始OpenHarmony应用开发的第一步。 一. OpenHarmony简介 OpenHarmony 是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目,目标是面向全场景、全连接、全智能…

BUGKU-WEB No one knows regex better than me

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 看到此类题目&#xff0c;直接代码审计 相关工具 base64 在线加密https://www.mklab.cn/utils/regex 解题步骤 代码审计 <?php error_reporting(0); # 从请求中获取了两个参数&#xff1…