小程序中下拉菜单的不定项选择

小程序中下拉菜单的不定项选择,第1张

针对团队内不同部门,不同人员的不定项选择。即可单选或者多选,并且可以跨部门。如下图

其中 A、B 同级, a、b 同级, 1、2 同级

利用 checkbox-group 组件的 bindchange 事件和表单组件的 name 属性。 checkbox-group文档

当二级或者三级有一个没有被选中一级也不会被选中

wxml:

由于直接粘贴过来的 wxml 可能会出现错误,但是整体结构就是这样。使用checkbox-group包裹checkbox,最后针对人员的被选择可以通过包裹人员的checkbox的checkbox-group中的name属性获取。

js:思路:就是判断当前a项是否被选中,进而做出不同 *** 作针对a下所有项。反向 *** 作亦是如此。

checkbox写在checkgroup里面,checkkgroup一个bindchange事件,选中未被选中都会触发,然后js是在函数里,参数是e,edetailvalue是一个数组,有几个checkbox选中数组就有几个元素,数组元素的值是checkbox的value值可以实时监听。然后看看就知道了

1基础组件:

什么是组件:

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

,属性

用来修饰这个组件,内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性,不管该属性等于什么,其值都为true

,只有组件上没有写该属性时,属性值才为false

。如果属性值为变量,变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类:

视图容器(View Container):

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content):

icon 图标, text 文字, progress 进度条

表单(Form):

button 按钮, form 表单, input 输入框, checkbox 多想选择器, radio 单选器, picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈(Interaction)

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image , video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲,使收缩; vi玩去,收缩

checkbox的value值

1如果一个数组里面包含对象,那么checkbox可以携带value值,并不影响里面内容的渲染,这个对于当前点击的是谁,有个好的标识。

通过edetailvalue获取。当前点击list的某一项。

方法有两种:

一:采用css的zoom属性

zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状。

二:采用css3的transform:scale属性

zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊。

整体来说zoom属性与transform:scale属性主要存在如下几点差异

1、zoom的缩放是相对于左上角的;而scale默认是居中缩放;

2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;

3、zoom和scale对元素的渲染计算方法可能有差异(需要自己动手,用高清图,仔细去看其中的区别)。

4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。

最后Anne在这里建议大家如果需要在小程序开发中修改单选框和复选框大小最好采用transform:scale属性,因为采用css的zoom属性时,形状被改变的有些明显,体验很不好。

小程序开发中,checkbox组件不可以单独使用。radio是选项按钮组件,该组件不能单独使用,必须作为radio-group的子组件使用,否则多个radio只有一个被选中。要监听radio组件的触发事件,需要使用radio-group组件的bindchange属性。

有什么问题尽管留言~

由于我平时主要使用wepy开发项目 所以这些常用封装及项目架子都是使用的wepy

覆盖了一些常用 *** 作与封装、登录流程、保存至相册及相关授权流程

以上就是关于小程序中下拉菜单的不定项选择全部的内容,包括:小程序中下拉菜单的不定项选择、微信小程序 checkbox 怎么判断是否选中、微信小程序_组件等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/10108346.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存