专栏首页极客起源小程序开发实战(8):可与其他组件绑定的文本组件(label)

小程序开发实战(8):可与其他组件绑定的文本组件(label)

可能有很多读者认为label和text差不多,都是用来显示文本的。其实label和text一点都不像,label本身也不能显示任何文本,该组件只是与其他组件进行绑定。目前这些可绑定的组件包括button、checkbox、radio和switch,这些组件会在后面的文章中详细讲解。

那么为什么要绑定呢?这是因为这些组件尽管可以显示文本,但除了button外,其他组件点击文本,是不会自动选中当前组件的,因此,需要使用label组件以某种方式,将这些组件和文本绑定到一起,不管是直接点击组件本身,还是点击组件旁边的文本,都会选中当前组件。

将label与其他组件绑定有如下两种方式。

  • 将其他组件作为label的子组件
  • 通过label组件的for属性指定要绑定的其他组件

第1种方式只是用label组件即可,不需要是用任何属性。第2种方式,label组件只包含文本组件(text),通常与要绑定的组件是平级的。下面先看第1种方式的实现。

先用checkbox组件为例,布局代码如下:

<view style="margin:20px" wx:for-items="{{checkboxItems}}">
  <label>
    <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
    <text>{{item.value}}</text>
  </label>
</view>

从这段布局代码可以看出,label组件中包含了一个checkbox组件和一个text组件,其中checkboxItems数组的代码如下:

checkboxItems: [
   {name: 'USA', value: '美国'},
   {name: 'CHN', value: '中国', checked: 'true'},
   {name: 'BRA', value: '巴西'},
   {name: 'JPN', value: '日本', checked: 'true'},
   {name: 'ENG', value: '英国'},
   {name: 'FRA', value: '法国'},
 ]

布局的显示效果如图1所示。

图1 checkbox组件的显示效果

其实从表面上看,label组件好像有点多余,如果将label组件去掉,checkbox和text组件直接作为view的子组件,显示的效果和图1所示的效果完全一样。布局代码如下:

<view style="margin:20px" wx:for-items="{{checkboxItems}}">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  <text>{{item.value}}</text>
</view>

不过我们发现,如果不使用label组件,只有直接点击checkbox本身,checkbox组件才会有反应,点击后面的文本,checkbox组件毫无反应。如果使用label组件,无论点击checkbox,还是点击后面的文本(text组件),checkbox组件都会有反应,这就是将label和checkbox组件绑定后的效果。

那么可能有的读者会问,如果label中包含有多个可绑定的组件,如多个checkbox,系统会如何处理呢?例如,下面布局代码中label组件包含了3个checkbox子组件。

<view style="margin:20px" wx:for-items="{{checkboxItems}}">
  <label>
    <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
    <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
    <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
    <text>{{item.value}}</text>
  </label>
</view>

布局的显示效果如图2所示。

图2 多个checkbox组件的显示效果

如果点击checkbox后面的文本,系统的处理原则是只触发第一个checkbox(其他组件也使用这个规则),例如,点击“美国”,触发的结果如图3所示。当然,我们可以通过直接点击checkbox触发另外两个checkbox组件。

图3 多个checkbox触发的效果

下面来看看第二种绑定方式,先看下面的布局代码。

<radio-group>
  <view style="margin:20px" wx:for-items="{{radioItems}}">
    <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
    <label for="{{item.name}}">
      <text>{{item.name}}</text>
    </label>
  </view>
</radio-group>

很明显,label组件并未包含radio组件,而只包含了一个text组件,用来显示与radio组件对应的文本。其中radioItems数组的代码如下:

radioItems: [
   {name: 'USA', value: '美国'},
   {name: 'CHN', value: '中国', checked: 'true'},
   {name: 'BRA', value: '巴西'},
   {name: 'JPN', value: '日本'},
   {name: 'ENG', value: '英国'},
   {name: 'FRA', value: '法国'},
 ]

布局的显示效果如图4所示。

图4 radio组件的显示效果

从布局代码来看,label组件多了一个for属性,该属性是String类型,用来指定与label中文本绑定的组件的id。其中radio组件的id是“{{item.name}}”,而for属性的值也是“{{item.name}}”,这说明,label中文本与item.name指定的radio组件绑定。所以无论点击radio组件本身,还是点击后面的文本,都会触发radio组件。

还记得本节前面给出的包含3个checkbox组件的布局代码吗?如果用label组件包含所有的checkbox组件,那么默认只能触发第一个checkbox组件,如果想触发指定的checkbox或其他可绑定组件,就需要使用第二种绑定方式,通过label组件的for属性指定要绑定组件的id。下面的布局代码允许点击checkbox后面的文本,触发第2个checkbox组件。

<view style="margin:20px" wx:for-items="{{checkboxItems}}">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  <checkbox id="bind_checkbox{{index}}"
        value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  <label for="bind_checkbox{{index}}">
    <text>{{item.value}}</text>
  </label>
</view>

从这段代码可以看出,第2个checkbox组件的id属性和label组件的for属性的值都是“bind_checkbox{{index}}”,表明文本与这个checkbox组件已经绑定。这时如果点击文本,会触发第2个checkbox组件。

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(10):单选、多选和开关组件

    radio是选项按钮组件,该组件不能单独使用,必须作为radio-group的子组件使用,否则多个radio只有一个被选中。

    蒙娜丽宁
  • 小程序开发实战(6):基础组件(text、icon和progress)

    小程序在有很多组件,其中基础组件用来显示一些静态的信息,也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。

    蒙娜丽宁
  • 微信小程序开发实战(12):滑杆组件(slider)和form组件

    step:Number类型,默认值是1,表示滑杆滑动的步长,取值必须大于0,并且可被max - min整除

    蒙娜丽宁
  • Vue插槽slot

    使用了那么久的vue,到现在才知道vue自带的组件插槽slot,说真的,插槽的作用在一些场景下非常有用。

    wade
  • PHP实现短网址功能,附代码

    使用PHP实现短网址功能,支持短网址生成及跳转功能,暂不支持短网址解析,可以自定义开发反解析功能。实现原理是依据26个小写字母+26个大写字母+0-9数字,组成...

    申霖
  • 怎么写一个vue-插件? loader加载进度条示例

    ps: 我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan...

    yangdongnan
  • SAP最佳业务实践:FI–应收帐款(157)-18一次性帐户过帐

    4.18 一次性帐户过帐 一次性帐户用于管理一次性客户。对一次性客户使用一次性帐户可以避免生成大量的主数据。 如果销售与分销模块已实施,请运行步骤 在销售与分...

    SAP最佳业务实践
  • 阿里与百联战略合作,为何中美电商玩法越来越不同?

    近日阿里巴巴与零售巨头百联集团达成战略合作,这只是阿里巴巴布局线下实体商业的一个常规动作,正如之前投资银泰百货、苏宁、三江和河马生鲜一样。每一次战略合作或者投资...

    罗超频道
  • 【python爬虫学习 】python

    可能的问题: 问题/解决:error: Microsoft Visual C++ 14.0 is required.

    py3study
  • React Native 学习资源精选仓库

    React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

    CrazyCodeBoy

扫码关注云+社区

领取腾讯云代金券