小程序按钮button自定义（宽高）样式

来源:简书分类: 文章浏览史发布时间:2020-08-29 21:24:47 最后更新:2020-08-29 浏览:2034

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/5de0e42d7351

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-29 21:24:47

获取微信头像等信息
效果：

默认头像+<button>

获取到的微信头像<image>

注意，你在css(wxss)里面直接设置button的width,height是无效的！！！必须在html(wxml)里面的style进行设置！！！

<view class="flex_horizontal_center">
      <button class="getUserInfoBtn" style="width: 14vmin;height: 14vmin;" open-type="getUserInfo" bindgetuserinfo="didGetUserInfo" wx:if='{{!hasWeChatIcon}}'>
          <image class="imageView" src='{{userIcon}}'></image>
      </button>
      <image class="imageViewOnly" src='{{userIcon}}' wx:if='{{hasWeChatIcon}}'></image>
      <view class="info flex_vertical">
          <text>{{userInfo.userName}}</text>
          <text>{{userInfo.phone}}</text>
      </view>
 </view>

.getUserInfoBtn {
  /* ，button的宽高无法在wxss里面修改，必须在用style写!!!*/
  width: 14vmin;
  height: 14vmin;
  border-radius: 7vmin; // 本来不需要切圆角的，无奈button就算设置背景色为透明，也还是有影子！
  position: relative;
  border: dashed 0 transparent;
  background-color: transparent;
}

.imageView {
  width: 14vmin;
  height: 14vmin;
  position: absolute;
  top: 0;   
  left: 0;   // 如果不设置left，会自动向右偏移（因为父视图切了圆角）
  border-radius: 7vmin;
}

.imageViewOnly {
  width: 14vmin;
  height: 14vmin;
  border-radius: 7vmin;
} 

.info {
  margin-left: 8pt;
}