评论

微信小程序Button内容有滚动条问题定位解决

微信小程序Button内容有滚动条问题定位解决

样式代码如下:


.shareRightButton {


width: auto;


height: 100rpx;


line-height: 100rpx;


flex: 1;


text-align: center;


font-size: 36rpx;


margin-left: 15rpx;


margin-right: 30rpx;


background-color: #0057a3;


color:#fff;


border-radius: 50rpx;


border: 2rpx solid #0057a3;


align-items: center;


justify-content: center;


padding: 0rpx;




查找分析中发现,button中设置border无效,并且会影响内容的实际高度,故删除border属性后button上的滚动条消失。



样式修改为如下:



另附上button去掉默认样式的公共样式,可根据自己的情况调整:


写button时务必要加上hover-class="none";


<button class="shareRightButton" hover-class="none">按钮</button>


/* Button默认样式 */


button::after {


border: none;






button {


width: 100%;


height: 100%;


position: relative;


display: flex;


margin-left: auto;


margin-right: auto;


padding-left: 0px;


padding-right: 0px;


box-sizing: border-box;


font-size: 18px;


text-align: left;


text-decoration: none;


line-height: 100%;


border-radius: 0px;


-webkit-tap-highlight-color: transparent;


overflow: scroll;


color: #000;


background-color: #fff;

点赞 0
收藏
评论

1 个评论

  • 胃里养了只霸王龙
    胃里养了只霸王龙
    2019-12-26

    我记得 我们最开始只做了一个功能:

    2019-12-26
    赞同
    回复
登录 后发表内容