微信小程序常见样式问题

1.修改button默认样式

微信小程序的 button 组件默认样式是可以用样式覆盖的方式修改。

首先用元素查看器查看button 默认样式，发现 button默认样式类如下：

首先在 button 的外层加个view组件

<view class="row-u7">
      <button open-type="share">
        <image class="ebImg" src="/images/temp/icon_share_w.png"/>
      </button>
</view>

然后用样式覆盖的方式修改button默认样式

.row-u7 button:not([size='mini']){
  width: auto;
  background: none;
  padding: 0;
  min-height: 0;
}

 

2.text无法自动换行

添加以下样式即可

  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;

3.scroll-view横向滚动

1. scroll-view父组件添加以下样式

white-space:nowrap;

2. scroll-view属性设置，允许横向滚动，启用flex布局（如果需要）

enable-flex="{{true}}" scroll-x="{{true}}" 

3. scroll-view设置高度，设置flex布局（如果需要）

display: flex;
height: 80rpx;