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

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


默认头像+
获取到的微信头像

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


      
      
      
          {{userInfo.userName}}
          {{userInfo.phone}}
      
 
.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;
}

你可能感兴趣的:(小程序按钮button自定义(宽高)样式)