微信小程序自定义获取手机号按钮样式

微信小程序提供了获取手机号的方式,需要通过 open-type 为 getPhoneNumber 的按钮,然而基础的 button 组件有时候并不能满足我们的需求

在这里插入图片描述

想要实现图中的自定义的按钮样式,有两种思路:

  • 通过 view 手写一个按钮,并将 button 的 opacity 设置为 0 (即透明)使用绝对定位覆盖在 view 之上
<view class="fake-button">
    <view class="iconfont icon-weixin" style="margin-right: 10rpx"></view>
    使用微信一键登录
    <button style="width: 80vw; height: 90rpx; border-radius: 45rpx; opacity:0; position: absolute; top:0; left:0"  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
</view>
  • 在 button 中使用字体图标,如阿里的iconfont
<button class="real-button" style="width: 80vw; height: 90rpx; background-color: rgb(76, 191, 0); border-radius: 45rpx; color: white; font-weight: normal" type="default">
    <view class="iconfont icon-weixin" style="display: inline-block"></view>
    使用微信一键登录
</button>

注:自定义 button 按钮的样式需要使用内联样式

猜你喜欢

转载自blog.csdn.net/weixin_42089228/article/details/127338523
今日推荐