小程序使用label组件扩展原生组件button

不想用小程序原生button，但又想拥有原生button的开发能力，如何实现呢？

借助原生标签label，就可以实现自定义button，且拥有和原生button一样的开放能力。

<label for="button">
  <view class="button">我是按钮</view>
</label>
<button id="button" open-type="contact"></button>

如上面代码所示，label标签有一个for属性，用来绑定组件id。此时.button已经拥有和原生button一样的开放能力，并且可以自由玩耍。

当然了原生button不能让它出现在页面中。

一个比较好的方法是使用绝对定位。

button {
  position: absolute;
  top: -1000px;
  left: -1000px;
}

使用绝对定位，并且top和left都设置的比较大，可以让这个元素远离页面。

虽然display:none也可以隐藏元素，但在页面中还是有这个组件，鼠标放上去可以看到它，以后在调试时会影响判断。

Tips：可以使用扩展的还有checkbox，radio，switch组件。

总结：button、checkbox、radio、switch组件配合label使用有奇效。

另外可添加微信ttxbg180218交流。