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

169 阅读1分钟

不想用小程序原生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;
}

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

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

Tips:可以使用扩展的还有checkboxradioswitch组件。

总结:buttoncheckboxradioswitch组件配合label使用有奇效。

另外可添加微信ttxbg180218交流