收藏
回答

iOS 10.3.3中view被重复渲染

问题模块 框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
框架 小程序 Bug 客户端 iOS 6.6.7 2.0.9

在iOS系统10.3.3系统下出现了一个view被渲染两次的情况,导致了页面只显示了部分内容。代码和相关截图如下。

部分代码如下:

wxml:

<view class="container">
  <topText class="banner-text" displayText="目前只支持人伤案件在线理赔" imgSrc="../../assets/icon/warn_4_2x.png" fontColor="#FA6060" fontSize="24rpx" />
 
  <view class='formTab'>
    <view class='formTab-item {{pageVariable.isShow?"selectedItem":""}}' data-valueType = 'mobileNO' catchtap='selectedChange'>
      <text>手机号登录</text>
    </view>
 
    <view class='formTab-item {{pageVariable.isShow?"":"selectedItem"}}' data-valueType='account' catchtap='selectedChange'>
      <text>账号登录</text>
    </view>
  </view>
  <view class='line'></view>
 
  <view class="form login-from">
    <view wx:if='{{pageVariable.isShow}}' class='content-middle'>
      <!--用户类型 -->
      <view class="inputView">
        <label class="label label-text">用户类型</label>
        <picker class="selectedText" bindchange="userTypeChange" mode="selector" value="{{pageVariable.userTypeIndex}}" range="{{list.userTypeList}}" range-key="name">
          <view class='selectedView picker-text'>{{list.userTypeList[pageVariable.userTypeIndex].name}}</view>
        </picker>
        <image class='reg-right-arrow' src='../../assets/icon/right_arrow_2x.png'></image>
      </view>
      <view class="line item-line"></view>
 
      <!--手机号-->
      <view class="inputView">
        <label class="label label-text">手机号</label>
        <view class="phoneNoView">
          <input class='phoneNoInput' text bindinput="mobileInput" placeholder-class="phcolor" placeholder='请输入手机号码' />
          <button class="{{pageVariable.sendCodeBtn}}" catchtap='getVerificationCode'>{{pageVariable.getmsg}} </button>
        </view>
      </view>
      <view class="line item-line"></view>
      <!--验证码-->
      <view class="inputView">
        <label class="label label-text">验证码</label>
        <input class="inputText inputText-s1" text bindinput="verifyNumberInput" placeholder-class="phcolor" placeholder='请输入验证码' />
      </view>
    </view>
 
    <view wx:else class='content-middle'>
      <!--账号-->
      <view class="inputView">
        <label class="label label-text">账号</label>
        <input class="inputText form-input" placeholder-class="phcolor" placeholder="请输入账号" bindinput="accountInput" />
      </view>
      <view class="line item-line"></view>
 
      <!--密码-->
      <view class="inputView">
        <label class="label label-text">密码</label>
        <input class="inputText {{list.isChange?'passwordText':''}}" password="true" placeholder-class="phcolor" placeholder="请输入密码" bindinput="passwordInput" />
      </view>
    </view>
    <!--按钮-->
    <view class="btnView submit-btn">
      <button class="loginBtn" type="warn" style='background-color:{{list.loginBackColor}}' open-type='getUserInfo' bindgetuserinfo='getUserInfo'>登录</button>
      <!--<buttonEx class="loginBtn" type="warn" displayText="登录" backgroundColor="{{list.loginBackColor}}" bindtap="login" />-->
    </view>
    <!--注册-->
    <view class="registerView">
      <text bindtap='regiser'>立即注册</text>
    </view>
  </view>
</view>

wxss:

.container {
  padding: 0;
}
 
.banner-text {
  align-self: stretch;
}
.formTab {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  height: 86rpx;
  width: 100%;
  background-color: #fff;
  font-size: 28rpx;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.30);
}
 
.formTab-item {
  color: #333;
  height: 80rpx;
  line-height: 80rpx;
}
 
.selectedItem {
  height: 76rpx;
  line-height: 76rpx;
  border-bottom: 4rpx solid #f04f4c;
  color: #e24542;
}
/*表单内容*/
 
.login-from {
  /*margin-top: 100rpx; */
  font-family: 'PingFangSC-Regular';
}
 
.loginBtn {
  width: 91.5%;
  background-color: #dc143c;
}
 
.promptView {
  width: 100%;
  display: inline-block;
  font-size: 24rpx;
  margin-top: 50rpx;
  color: #bfbfbf;
}
 
.promptTitle {
  width: 18%;
  float: left;
  text-align: center;
}
 
.promptInfo {
  width: 82%;
  float: left;
}
 
.registerView {
  font-size: 28rpx;
  text-align: right;
  padding-top: 34rpx;
  color: #666;
  font-family: PingFangSC-Regular;
  line-height: 28rpx;
  width: 91.5%;
  margin-left: auto;
  margin-right: auto;
}
 
.label-text {
  color: #333;
}
 
.submit-btn {
  margin-top: 44rpx;
}
.phoneNoView {
  color: #f8f8f8;
  display: inline-flex;
  width: 100%;
  height: 88rpx;
  align-items: center;
}
.phoneNoInput {
  height: 86rpx;
  width: 60%;
  color: #333333;
}
 
.reg-right-arrow {
  width: 18rpx;
  height: 25rpx;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 28rpx;
}
 
.selectedText {
  display: inline-flex;
  width: 94%;
  height: 88rpx;
  color: #aaa;
  align-items: center;
}
.picker-text {
  min-width: 480rpx;
}
.verificationCodeBtnSend {
  float: right;
  width: 174rpx;
  height: 56rpx;
  font-size: 24rpx;
  color: #333;
  line-height: 54rpx;
  background-color: #fff;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin-right: 30rpx;
  margin-top: auto;
  margin-bottom: auto;
}
 
.verificationCodeBtnWaitSend {
  float: right;
  width: 174rpx;
  height: 56rpx;
  font-size: 24rpx;
  color: #999999;
  line-height: 54rpx;
  background-color: #EEEEEE;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin-right: 30rpx;
  margin-top: auto;
  margin-bottom: auto;
}
.inputText-s1{
  padding-left:4rpx;
}

app.wxss:

@import "/weui.wxss";
 
page {
  height: 100%;
}
 
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #eee;
  overflow-x: hidden;
}
 
.content {
  overflow-x: hidden;
}
 
.content-middle {
  background-color: #fff;
}
 
.form {
  flex: auto;
  height: 100%;
  width: 100%;
}
 
.inputView {
  background-color: #fff;
  /* line-height: 88rpx;  */
  width: 100%;
  display: inline-flex;
  font-size: 28rpx;
  min-height: 88rpx;
  align-items: center;
}
 
.label {
  color: #545454;
  display: flex;
  padding-left: 32rpx;
  padding-right: 20rpx;
  width: 152rpx;
  align-items: center;
}
 
.inputText {
  /* flex: block;
  float: right;  *//* margin-right: 44rpx;  *//* margin-top: 22rpx;  */
  color: #333;
  /* font-size: 28rpx ; */
  width: 100%;
  height: 88rpx;
  padding-right: 20rpx;
}
 
.line {
  width: 100%;
  height: 3rpx;
  background-color: rgba(0, 0, 0, 0.1);
}
 
.item-line {
  margin-left: 4.3%;
}
 
/*按钮*/
 
.btnView {
  width: 100%;
  height: auto;
  background-color: #eee;
  margin-top: 0rpx;
  margin-bottom: 0rpx;
  padding-bottom: 0rpx;
}
 
.show {
  display: '';
}
 
.hide {
  display: none;
}
 
.articleTitle {
  width: 100%;
  text-align: center;
  font-size: 34rpx;
  /*font-weight: bold;*/
  margin-top: 42rpx;
  margin-bottom: 32rpx;
  font-family: "PingFang SC Medium";
}
 
.somebodyNamed {
  font-family: "PingFang SC Regular";
  color: #333;
  line-height: 36rpx;
  font-size: 28rpx;
  width: 91.5%;
}
 
.articleParagraph {
  width: 91.5%;
  font-size: 28rpx;
  word-break: break-all;
  line-height: 36rpx;
  color: #666;
  font-family: "PingFang SC Regular";
  margin-top: 24rpx;
}
 
.articleItem {
  width: 91.5%;
  font-size: 28rpx;
  /*font-weight: bold;*/
  word-break: break-all;
  margin-top: 40rpx;
  font-family: "PingFang SC Medium";
}
 
.paragraphItem {
  width: 91.5%;
  font-size: 28rpx;
  word-break: break-all;
  padding-left: 40rpx;
  font-family: "PingFang SC Regular";
  text-indent: 40rpx;
  color: #666;
}
 
.selectedView {
  display: flex;
  flex-grow: 1;
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #353535;
  letter-spacing: 0;
}
 
.phcolor {
  color: #999;
}
 
.passwordText {
  font-size: 28rpx;
}
 
.line-strip {
  width: 100%;
  height: 24rpx;
  background-color: #eee;
}
 
.no-record {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
  width: 100%;
}
 
.no-record-img {
  height: 160rpx;
  width: 188rpx;
  margin-top: 20.4%;
}
 
.no-record-text {
  color: #999;
  font-size: 32rpx;
  padding-top: 30rpx;
  line-height: 32rpx;
}
 
.right-arrow {
  width: 14rpx;
  height: 25rpx;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 20rpx;
}

js:

data: function() {
    var model = {};
    
    model.list = {
      userTypeList: feiCheEnum.loginUserType,
      loginBackColor: '',
      isLogin:false,
      isChange:false
    };
 
    model.pageVariable = {
      isShow: true,
      loginType: feiCheEnum.loginType.mobileLogin, //手机号:mobile,账号:account,默认手机号登录
      userTypeIndex:0,
      sendCodeBtn: 'verificationCodeBtnSend',
      getmsg: '获取验证码',
    };
    return model;
  }(),
  selectedChange: function (e) {
    if (e.currentTarget.dataset.valuetype == 'mobileNO') {  //手机号
      this.data.params.accountLogin.account = '';
      this.data.params.accountLogin.password ='';
    }
 
    if (e.currentTarget.dataset.valuetype == 'account') {   //账号
      this.data.params.mobileLogin.Moblie = '';
      this.data.params.mobileLogin.VerifyNumber = '';
    }
    this.setData({
      'pageVariable.isShow': !this.data.pageVariable.isShow,
      'list.loginBackColor': '#FFC0BF',
      'list.isLogin': false,
      'pageVariable.loginType': this.data.pageVariable.loginType == feiCheEnum.loginType.mobileLogin ? feiCheEnum.loginType.accountLogin : feiCheEnum.loginType.mobileLogin
    });
  },

相关截图:



注:截图中黄色选中的为重复渲染的view。



请官方开发人员尽快回复,项目挺急的,在线等……

最后一次编辑于  2018-06-05  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答