weixin_36672132
weixin_36672132
2016-11-10 08:43
采纳率: 100%
浏览 3.9k

微信小程序显示问题求大神解决

微信小程序 input标签password模式,在安卓手机上placeholder中的内容也被隐藏了
模拟器中input标签位置是居中的,未设置margin-left,在iphone上显示的是顶在最左面,但是在android手机上是居中的。在iphone手机上margin的设置基本无效,为什么?

代码如下:

 <view class="container">
    <input class="common-input" placeholder="请输入邮箱" bindinput="dataForUsername" value="{{username}}" auto-focus />
    <view class="verificationCode-view">
        <input class="verificationCode-input" placeholder="验证码" bindinput="dataForVerificationCode" value="{{verificationCode}}" />
        <button type="primary" class="sendVerificationCodeBtn" bindtap="doSenVercode">验证码</button>
    </view>
    <button type="primary" class="common-submitBtn" bindtap="doFindPwd">找回密码</button>
</view>

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
.common-input{
  width:80%;
  height:92rpx;
  border: 1px solid #d9d9d9;
  /*padding: 10rpx;*/
  border-radius: 3px;
}
.common-submitBtn{
  margin-top:30rpx;
  width:80%;
}
.verificationCode-view{
    width: 80%;
}
.verificationCode-input{
  width:50%;
  height:92rpx;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  margin-top: 25rpx;
  float: left;
}
.sendVerificationCodeBtn{
    width:45%;
    float:right;
    margin-top: 25rpx;
}


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • weixin_36672132
    weixin_36672132 2016-11-11 09:54
    已采纳

    问题已经基本解决,placeholder的问题因为微信版本不是最新,之前版本存在bug

    其他的问题基本属于样式问题,因为好多样式设置的时候在微信小程序中不兼容
    使用微信demo中的container属性
    .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
    }
    align-items: center;这个属性会在iPhone上存在问题。删除就好了

    点赞 评论
  • qq_21294085
    qq_21294085 2016-11-10 09:06

    那个,input中width指定百分比,我这边在(在iPhone)经测是无效的。
    我要指定大小才生效。你看看是不是这个问题

    点赞 评论

相关推荐