×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

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

使用组件注意事项

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

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

button 组件

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

代码示例

 
 
 
    
  
  
  
    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 组件的宽高，可以扩大控制热区。

代码示例

 
 
 
    
  
  
  
    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 缩放进行设置。

代码示例

 
 
 
    
  
  
  
  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 。

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.