收藏
回答

button编辑效果与预览真机效果完全不一致问题,怎么回事?求解答

wxml文件内容:

<view class="userinfo_view">

  <view class="img_view">

      <image class="uicon" src="../images/jiesao3.png"></image>

  </view>

    <view class="userandtime_view">

      <view>

        <text class="username">曹探长</text>

      </view>

      <view class="fabutime_view">

        <text class="fabutime">2019-11-13 20:00</text>

      </view>

    </view>

/*出问题的按钮如下*/

     <button class="collectbtn" hover-class="button-hover">关注</button>

</view>

wxss文件内容:

.userinfo_view {

  display: flex;

  flex-direction: row

  width: 100%;

  height: 10%;

  padding: 5rpx;

  border-top: 1rpx solid #ededed;

  border-bottom: 1rpx solid #ededed;

  background-color: #fff;

  vertical-align: center;

}

.uicon {

  width: 80rpx;

  height: 80rpx;

  border-radius: 40rpx;

  margin: 20rpx;

}

.userandtime_view {

  display: flex;

  flex-direction: column;

  align-content: left;

  margin-top: 10rpx;

  margin-left: 10rpx;

  width: 70%

}

.username {

  font-size: 14px;

  font-weight: bold;

  color: black;

  margin-top: 10rpx;

}

.fabutime {

  font-size: 12px;

  color: gray;

}

.buttom_view{

  width: 10%;

  justify-content: right;

  display: flex;

}/*按钮的效果样式如下*/

.collectbtn {

  width: 65px;

  height: 45rpx;

  text-align: center;

  font-size: 20rpx;

  border-radius: 30rpx;

  line-height:45rpx;

  margin-right: 25rpx;

  vertical-align: center;

  border-width:1rpx;

   margin-top: 30rpx;

}

.collectbtn ::after{

  border:1px solid #f1f1f1;

} 编译时的效果:,此效果是想要达到的效果 但点击预览,在手机上查看却变成了如下

备注: 编译时选择的机型和真机是同一个iphone7 plus


最后一次编辑于  11-21
回答关注问题邀请回答
收藏

1 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    11-21

    效果以真机为准,想要开发工具上的效果,那你就写样式把它整成那种效果就行啦

    wxss 限制高宽,位置等

    11-21
    赞同
    回复 2
    • 诺言
      诺言
      11-21
      编译上就是设置了宽高,位置后显示出来的效果啊,我的天啊。
      11-21
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      11-21回复诺言
      button改用view代替试试
      11-21
      回复
问题标签