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

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


默认头像+<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;
}
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容