小程序按钮button自定义(宽高)样式

来源:简书 分类: 文章浏览史 发布时间:2020-08-29 21:24:47 最后更新:2020-08-29 浏览:1980
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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;
}
php技术微信