微信小程序(三十九)表单信息收集

注释很详细,直接上代码

上一篇

新增内容:
1.表单收集的基本方法
2.picker的不足及解决方法

源码:

index.wxml

<!-- 用户信息 -->
<view class="register"><!-- 绑定表单信息收集事件--><form bindsubmit="onSubmit"><view class="form-field"><label for="">姓名:</label><view class="field"><!-- 给表单内容起个名字 --><input type="text" placeholder="请输入您的姓名" name="name"/></view></view><view class="form-field"><label for="">性别:</label><view class="field"><radio-group name="gender"><radio value="" checked /><radio value="" /></radio-group></view></view><view class="form-field"><label for="">爱好:</label><view class="field" ><checkbox-group name="hobby"><checkbox value="写代码" checked />写代码<checkbox value="睡大觉" />睡大觉</checkbox-group></view></view><view class="form-field"><label for="">籍贯:</label><view class="field"><picker mode="region" name="city" bindchange="changeRegion">{{city}}</picker></view></view><!-- form-type="submit"加一个提交类型即可--><button type="primary" class="submit" form-type="submit">保存</button></form>
</view>

index.wxss

.form-field{display: flex;margin: 40rpx 40rpx;
}.field{margin: 0rpx 50rpx;
}/* 没错,你绝对没有看错,不提高个权值修改是无效的个人猜想是button组件自带的weight相当于wxml行内的style,解决方法:要么在行内修改覆盖,要么像我这样提高权值即可
*/
.submit{width: 600rpx !important;
}

index.js


Page({// 储存籍贯信息data:{city:"请选择籍贯"},onSubmit(e){console.log(e.detail.value)},changeRegion(e){//获取选择的籍贯信息const city=e.detail.value//籍贯信息的赋值this.setData({city:city})}
})

效果演示:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下的多线程

前面学习了进程、文件等概念&#xff0c;接下里为大家引入线程的概念 多线程 线程是什么&#xff1f;为什么要有线程&#xff1f;线程的优缺点Linux线程操作线程创建线程等待线程终止线程分离 线程间的私有和共享数据理解线程库和线程id深刻理解Linux多线程&#xff08;重点&a…

AI大模型开发架构设计(9)——AI 编程架构刨析和业务应用实战案例

文章目录 AI 编程架构刨析和业务应用实战案例1 AI编程代码生成模型剖析编程方式的发展代码自动生成基于大模型的AI编程工具——Github Copilot以 CodeGeeX 为例-发展过程以 CodeGeeX 为例-训练过程以 CodeGeeX 为例-大规模代码数据处理以 CodeGeeX 为例-模型结构以 CodeGeeX 为…

【开源】基于JAVA+Vue+SpringBoot的新能源电池回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…

this指针剖析

this指针 this指针引出&#x1f4a6;特性&#x1f4a6;this指针存储位置 this指针 引出&#x1f4a6; 我们先来定义一个日期类 Date class Date { public: void Init(int year, int month, int day) { _year year; _month month; _day day; } void Print() { cout <<…

spring Bean 生命周期 源代码分析

文章目录 一、生命周期关键步骤1.1 前置条件1.2 创建bean 二、Bean生命周期、核心源码分析2.1 前置条件, 源代码2.2 创建bean, 源代码 一、生命周期关键步骤 1.1 前置条件 1.创建rootBean 生成RootBeanDefinition 2.对bean定义的方法&#xff0c;进行验证、重写 调用方法pre…

5G NR 频率计算

5G中引入了频率栅格的概念&#xff0c;也就是小区中心频点和SSB的频域位置不能随意配置&#xff0c;必须满足一定规律&#xff0c;主要目的是为了UE能快速的搜索小区&#xff1b;其中三个最重要的概念是Channel raster 、synchronization raster和pointA。 1、Channel raster …

用的到的linux-查找find-Day4

前言&#xff1a; 在上一节&#xff0c;我们了解到rm删除命令&#xff0c;一共拥有三种模式&#xff0c;即-i默认只能删除文件且会提示确认&#xff0c;其次是-r 遍历删除&#xff0c;用于删除目录及目录下的文件&#xff0c;同样需确认后才会删除&#xff0c;最后为-f为强制删…

猫头虎分享已解决Bug || TypeError: Cannot set property ‘innerHTML‘ of null

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

网络学习:数据链路层VLAN原理和配置

一、简介&#xff1a; VLAN又称为虚拟局域网&#xff0c;它是用来将使用路由器的网络分割成多个虚拟局域网&#xff0c;起到隔离广播域的作用&#xff0c;一个VLAN通常对应一个IP网段&#xff0c;不同VLAN通常规划到不同IP网段。划分VLAN可以提高网络的通讯质量和安全性。 二、…

探索C语言中的联合体与枚举:数据多面手的完美组合!

​ ✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C语言学习 贝蒂的主页&#xff1a;Betty‘s blog 1. 联合体的定义 联合体又叫共用体&#xff0c;它是一种特殊的数据类型&…

leetCode二叉树的堂兄弟节点

题目描述 在二叉树中&#xff0c;根节点位于深度 0 处&#xff0c;每个深度为 k 的节点的子节点位于深度 k1 处。 如果二叉树的两个节点深度相同&#xff0c;但 父节点不同 &#xff0c;则它们是一对堂兄弟节点。 我们给出了具有唯一值的二叉树的根节点 root &#xff0c;以…

从概念到实践:数字孪生在智慧城市建设中的应用与挑战

一、引言 随着科技的飞速发展&#xff0c;数字孪生这一概念逐渐受到广泛关注。数字孪生通过建立物理世界的数字模型&#xff0c;为城市的管理和规划提供了前所未有的可能性。智慧城市作为现代城市发展的重要趋势&#xff0c;正逐渐成为人们关注的焦点。本文将探讨数字孪生在智…