微信小程序重置按钮的样式

更新日期: 2020-09-05 阅读次数: 7054 字数: 423 分类: 微信小程序

有时候需要通过微信小程序 button 设置 open type 来获取用户的信息。这时候就不能用 view 来实现,必须使用 button。

但是 button 默认带了样式,需要将默认样式清除掉。

可以在定义一个 reset_btn 的样式来重置 button 的样式。

代码示例

.reset_btn {
	margin:0;
	padding:0;
	border-radius:0;
	border:none;
	font-size:1em;
	background-color:transparent;
}

.reset_btn::after{
  border: none;
}

若外层有背景样式,可以将 button 的宽高设置百分百来完全覆盖。别忘了设置居中。

width: 100%;   
height: 100%;
display: flex;
justify-content: center;
align-items: center;

但实际测试这个 class 中的 width 不起左右,还是加在 inline style 中有效。

举例说明

例如,我要自定义小程序分享按钮的样式:

invite_btn 中定义了具体的样式,诸如设置的背景图、大小等。

<view class="invite_btn flex_all_center">
    <button class="reset_btn inner_btn" open-type="share" style="color: #fff; width: 650rpx;">
		邀请好友注册得积分
    </button>
</view>

终极解放方案

然而小程序按钮在部分华为手机和 iphone 8 以上依然有高度的问题。即便设置了 width height important 也不行。

在小程序官方论坛里找到一个终极解决方案,而且实现起来也简单,且代码结构更清晰。

思路是:

  • 将按钮绝对定位到目标区域之上
  • 同时设置按钮为完全透明
.sky_btn {
	position: absolute;
	top: 0;
	opacity: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 999;
}

注意在 button 中随便加段文本:

<view class="enter_info flex center v_center" wx:if="{{isLogin}}">
    完善资料
    <image src="/images/right.png"
        style="width: 9rpx; height: 18rpx;margin-left:9rpx;"></image>
    <button class="reset_btn sky_btn" open-type="getUserInfo"
        bindgetuserinfo="bindGetUserInfo" data-btn="edit">
        text
    </button>
</view>

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式