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

2024-03-14 05:52

本文主要是介绍微信小程序(五十八)分步表单多页面传值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

注释很详细,直接上代码

新增内容:
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-cellwx: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-cellcustom-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-cellcustom-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) + 4const rooms = []for (let i = 0; i < size; i++) {// 楼层号生成 1 ~ 20(温馨提醒:1. random生成,2.floor向下取整)const floor = Math.floor(Math.random() * 19) + 1// 具体的房间号生成 1 ~ 3const 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.chinasem.cn/article/807397

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

这些心智程序你安装了吗?

原文题目:《为什么聪明人也会做蠢事(四)》 心智程序 大脑有两个特征导致人类不够理性,一个是处理信息方面的缺陷,一个是心智程序出了问题。前者可以称为“认知吝啬鬼”,前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出,指个体可以从记忆中提取出的规则、知识、程序和策略,以辅助我们决策判断和解决问题。如果把人脑比喻成计算机,那心智程序就是人脑的

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>