小白开发微信小程序10--表单组件之checkbox-group/radio-group/label

这篇具有很好参考价值的文章主要介绍了小白开发微信小程序10--表单组件之checkbox-group/radio-group/label。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、小程序组件分类

微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了 9 大类,分别是:

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ 地图组件

⑦ 画布组件

⑧ 开放能力

⑨ 无障碍访问

官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/

二、表单组件

1、checkbox-group复选框组

功能描述

多项选择器,内部由多个checkbox组成。

微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档
微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档

2、check

功能描述:多选项目

微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档

3、radio-group单选框组

单项选择器,内部由多个 radio 组成

微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档

4、Radio

微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档
微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档

5、label

用来改进表单组件的可用性。

使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:button, checkbox, radio, switch, input。

微信小程序checkbox-group,小白开发微信小程序,微信小程序,微信,表单,组件,Powered by 金山文档

6、富文本编辑器 editor

富文本编辑器,可以对图片、文字进行编辑。

编辑器导出内容支持带标签的 html 和纯文本的 text ,编辑器内部采用 delta 格式进行存储。

通过 setContents 接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入 这段样式,并维护 <qlcontainer><ql-editor></ql-editor></ql-container> 的结构。

图片控件仅初始化时设置有效文章来源地址https://www.toymoban.com/news/detail-756416.html

到了这里,关于小白开发微信小程序10--表单组件之checkbox-group/radio-group/label的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小白开发微信小程序49--本地服务器部署测试小程序

    相信大家对微信小程序的基础和项目应该没有太大问题了,如果还有对微信小程序开发有一些问题,请查看回顾...微信小程序开发者开发好一款微信小程序后,怎么才能发布呢?如何将其提交给微信审核呢? 在前面的【领航教育】项目开发中,后台采用的是C#开发语言,提供的

    2024年02月09日
    浏览(40)
  • 小白开发微信小程序21--网络API(asp.net core版)

    在一个网站里面发起https请求是很常见的,但是,由于微信小程序是腾讯内部的产品,不能直接打开一个外部的链接,例如,您在微信小程序里面无法直接打开网站,但是,在做小程序开发的时候,如果想调用这个网站的一个接口,这时,如何使用?因为,微信小程序里面不

    2024年02月09日
    浏览(57)
  • 结合ColorUI组件开发微信小程序

    1.自定义组件生命周期函数: 2.使用ColorUI定义的列表样式: 3.使用ColorUI定义的图标样式: text class=\\\"cuIcon-locationfill text-grey\\\"/text 4.可上下滚动的列表: (1).wxml: (2).js文件:    (3).wsxx文件:

    2024年02月22日
    浏览(35)
  • 05-微信小程序常用组件-表单组件

    05-微信小程序常用组件-表单组件 微信小程序包含了六大组件: 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。 其中,视图容器组件包括view和scroll-view等,用于实现页面的

    2024年02月12日
    浏览(36)
  • 微信小程序常用表单组件

       button 为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交。其属性表如下所示。 代码示例:    checkbox 为复选框组件,常用于在表单中进行多项数据的选择。复选框的 checkbox-group 为父控件,其内部嵌套若干个 checkbox 子控件。    checkbox-group 属性如

    2024年02月09日
    浏览(31)
  • 开发微信小程序使用 uview 的upload组件时,点击无反应问题记录

    使用uniapp+uview开发微信小程序使用 u-upload组件所遇到过的问题记录。待持续完善 ... 原因一:可能是《用户隐私保护指引》未授权导致的。 1:自定义隐私授权组件,在小程序首页引入。 2:到小程序公众平台-设置-基本设置-服务内容声明-用户隐私保护指引,完善好后,等待

    2024年02月04日
    浏览(34)
  • 微信小程序(十一)表单组件(进阶)

    注释很详细,直接上代码 上一篇 新增内容:(涉及内容较多,建议细看源码) 1. radio-group 的使用与数据处理 2. checkbox-group 的使用与数据处理 3. picker 的使用与数据同步处理(此处示范了地域与日期) 源码: form.wxml form.js form.wxss util.js 效果演示: 下一篇

    2024年01月24日
    浏览(36)
  • 微信小程序(十)表单组件(入门)

    注释很详细,直接上代码 上一篇 新增内容: 1. type 属性指定表单类型 2. placeholder 属性指定输入框为空时的占位文字 源码: form.wxml form.wxss 效果演示: 1.不同的 type 属性所决定的输入法键盘 密码类型 因为会屏蔽投屏软件所以 屏幕会黑 ,在实际手机里面显示的是常见的 密码

    2024年01月25日
    浏览(35)
  • uni-app开发微信小程序,textarea组件宽度设置,解决超出父级div

    当我们使用textarea组件时,会出现设置宽度100%,但其超出了父级Div,如下图 添加 box-sizing:border-box; 属性,即可完美解决。 box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。 例如,假如您需要并排放置两个带边框的框,可通过将

    2024年03月13日
    浏览(38)
  • 微信小程序之自定义表单组件(radio)

    背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件。 (自定义组件其实往往用在需要复用的地方,比如每个页面都有一样的头部和底部,那么我们就可

    2024年02月09日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包