创新互联百度小程序教程：使用组件注意事项

  • 使用组件注意事项
    • button 组件
    • label 组件
    • 常见问题
      • Q：为什么 label 组件不支持绑定 input 组件和 textarea 组件？
  • switch 组件
  • textarea组件
  • 表单校验
  • 组合能力示例

    使用组件注意事项

    在使用小程序组件的时候，有一些开发实现的问题需要被注意。

    为革吉等地区用户提供了全套网页设计制作服务，及革吉网站建设行业解决方案。主营业务为成都做网站、成都网站建设、革吉网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

    button 组件

    为了处理移动端的 1px 问题，默认类型的 button 组件在设置边框样式时使用了伪类。
    场景：需要设置 button 边框样式覆盖默认样式。
    解决方法：开发者可以通过伪类设置样式来覆盖默认的边框样式。

    代码示例

    • SWAN
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  按钮 default
      3. 
  
  
  
      4. 
 
 
 
     
 
 
      
  
  
  
    1. .btn {
      2. 
  
  
  
    2.  position: absolute;
      3. 
  
  
  
    3.  top: 50px;
      4. 
  
  
  
    4. }
      5. 
  
  
  
    5. .btn:after {
      6. 
  
  
  
    6.  border: 1px solid #f00;
      7. 
  
  
  
    7. }
      8.

    label 组件

    label 组件使用 for 属性找到对应的 ID（必须写 for），当点击时，就会触发对应的控件。目前可以绑定的控件有：button、checkbox、radio、switch 。
    场景：button/checkbox/radio/switch 组件较小的时候，可点击区域变小，导致用户体验不好。
    解决方法：使用 label 组件包裹，通过控制 label 组件的宽高，可以扩大控制热区。

    代码示例

    • SWAN
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  智能小程序
      4. 
  
  
  
      5. 
 
 
 
     
 
 
      
  
  
  
    1. .label {
      2. 
  
  
  
    2.  display: block;
      3. 
  
  
  
    3.  padding: .2rem;
      4. 
  
  
  
    4. }
      5.

    常见问题

    Q：为什么 label 组件不支持绑定 input 组件和 textarea 组件？

    A：这是因为为了提供更加丰富的功能和更接近于原生的体验，input 和 textarea 是通过原生组件的形式实现的，关于原生组件具体可以参考原生组件说明，而 label 是非原生组件，因此暂时不支持绑定 input 组件和 textarea 组件。

    switch 组件

    switch 组件默认大小为 38px * 23px ，但不能通过设置 width 和 height 进行调整。
    场景：开发者想调整 switch 组件的大小，直接设置 width 和 height 没有效果。
    解决方法：可以通过 CSS scale 缩放进行设置。

    代码示例

    • CSS
     
 
 
      
  
  
  
    1. swan-switch {
      2. 
  
  
  
    2.  /* 通过缩放调整大小 */
      3. 
  
  
  
    3.  transform: scale(.5);
      4. 
  
  
  
    4.  /* 图标宽度并不会改变 */
      5. 
  
  
  
    5.  /* width: 1.1rem; */
      6. 
  
  
  
    6. }
      7.

    textarea组件

    textarea 的 blur 事件会晚于页面上的 tap 事件。
    场景：有一个表单（textarea + button），获取表单内容用的是 bindblur 事件。因为 textarea 的 blur 事件会晚于页面上的 tap 事件，所以输入内容后立即点击 button 是不能获得数据的。
    解决方法：可以使用 form 的 bindsubmit 。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.