实现button按钮的内容为图片

偷轮子

于 2020-04-20 11:02:36 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_20411471/article/details/105629828

版权

本文介绍了如何在微信登录功能中，用未登录图片替换button按钮的文字内容，通过设置button样式，包括border为0，使用流式布局排列子组件，并调整image图片样式使其居中，以此达到理想的页面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在实现个人中心页面时会有微信登录功能，在此想实现，以未登录图片代替button按钮的样式，实现样式如下：

前台wxml内容如下：

<view class="container">
  <view class="userinfo">
    <button wx:if="{
  {!hasUserInfo && canIUse}}" open-type="getUserInfo" class="unlogin" hover-class="none" bindgetuserinfo="getUserInfo">
      <image class="unlogin_image" src="../../images/unlogin.png">
      </image>
      <text style="color:#5E5759">微信登录</text>
    </button>
    <block wx:else>
      <image class="userinfo-avatar" src="{

最低0.47元/天解锁文章