1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序自定义获取手机号按钮样式

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

时间:2021-12-30 23:31:57

相关推荐

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

微信小程序提供了获取手机号的方式,需要通过 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 按钮的样式需要使用内联样式

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。