收藏
回答

iOS系统10.3.3界面样式错误

操作系统 操作系统版本 手机型号 微信版本
iOS 10.3.3 只测试了 iPhone6 、 iPhone6s p 6.6.1


你想反馈一个 Bug 还是 提一个需求?

我想反馈一个Bug

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

真机,iOS系统10.3.3出现样式错误,

iOS其他系统以及android系统打开姿势如下图:


iOS10.3.3 打开姿势如下图:

* 如何复现?

wxml代码如下

<view class='address_view'>

<view class='address_info' wx:for="{{4}}" wx:for-item="item" wx:for-index="Idx" catchtap='selectTap' data-index="{{Idx}}">

<view class='item_view'>

<view class='user_info'>

<text class='consignee_txt'>测试用户名</text>

<text class='mobile_txt'>151****4807</text>

</view>

<view class='address_info'>

<text class='address_info_txt'>测试详细地址</text>

</view>

<view class='user_handle'>

<view class='bt-views' catchtap='editAddressTap' data-index="{{Idx}}">编辑</view>

<view class='bt-view' catchtap='delectAddressTap' data-address-id="{{item.address_id}}">移除</view>

</view>

</view>

</view>

<!--上拉加载更多-->

<view class='reachbottom'>

<text>正在加载……</text>

</view>

<!--固定在底部的view-->

<view class='sales-process'>

<view class='add-address' catchtap='addAddress'>添加收货地址</view>

</view>

</view>


wxss代码如下:

.address_view{

display: flex;

flex-direction: column;

align-items: center;

height: 100%;

padding-bottom: 80rpx;

}

.address_info{

display: flex;

flex-direction: column;

align-items: center;

height: 100%;

width: 100%;

margin-top: 20rpx;

background: #ffffff

}

.item_view{

display: flex;

flex-direction: column;

align-items: center;

width: 100%

}

.user_info{

display: flex;

flex-direction: row;

align-items: center;

width: 100%;

border-bottom: 1rpx solid #f8f8f8;

justify-content: space-between;

}

.consignee_txt{

font-size: 32rpx;

color: #515151;

margin: 20rpx;

}

.mobile_txt{

font-size: 34rpx;

color: #69b82d;

margin: 20rpx;

}

.address_info{

display: flex;

flex-direction: row;

align-items: center;

width: 100%;

}

.address_info_txt{

font-size: 30rpx;

color: #515151;

margin: 0 20rpx 20rpx 20rpx;

line-height: 45rpx;

}

.user_handle{

display: flex;

flex-direction: row-reverse;

width: 100%;

margin: 20rpx;

}

.bt-views{

font-size: 28rpx;

color: #69b82d;

height: 40rpx;

padding: 10rpx 30rpx;

margin-right: 20rpx;

border: 1px solid #69b82d;

}

.bt-view{

font-size: 28rpx;

color: #f57000;

height: 40rpx;

padding: 10rpx 30rpx;

margin-right: 40rpx;

border: 1px solid #f57000;

}

/*底部加载更多*/

.reachbottom{

display: flex;

flex-direction: column;

align-items: center;

width: 100%

}

.reachbottom text{

font-size: 14px;

padding: 20rpx 0 20rpx 0;

color: #a1a1a1;

}

/*底部按钮*/

.sales-process{

position: fixed;

bottom: 0;

height: 100rpx;

left:0;

right: 0;

display: flex;

flex-direction: row;

z-index:1;

}

.add-address{

height: 100%;

width: 100%;

background: #69b82d;

line-height: 100rpx;

text-align: center;

font-size: 30rpx;

color: #ffffff

}

page{

background: #f8f8f8

}



* 提供一个最简复现 Demo

如上代码

最后一次编辑于  2018-01-04
回答关注问题邀请回答
收藏

8 个回答

  • 工号 9527
    工号 9527
    2018-01-05

    你好

    page{

    height: 100%;

    background: #f8f8f8;

    }


    2018-01-05
    有用
    回复
  • 工号 9527
    工号 9527
    2018-01-04

    是否勾选了上传时自动补全样式?

    2018-01-04
    有用
    回复
  • 余圳平
    余圳平
    2018-01-05

    可以了,可以了 是样式没有写好。谢谢

    2018-01-05
    有用
    回复
  • 余圳平
    余圳平
    2018-01-05

    ok了   还是代码不够规范呀,谢谢啦

    2018-01-05
    有用
    回复
  • 余圳平
    余圳平
    2018-01-05

    请问这个bug  具体怎么解决,求指点。

    2018-01-05
    有用
    回复
  • 余圳平
    余圳平
    2018-01-04

    6.6.0微信版本  iphone 5s 系统版本10.3.3  刚测试   也会有这个样式错误

    2018-01-04
    有用
    回复
  • 余圳平
    余圳平
    2018-01-04

    只有在iOS系统版本为10.3.3的时候  会出现这个样式错误

    2018-01-04
    有用
    回复
  • 余圳平
    余圳平
    2018-01-04

    勾选了的

    2018-01-04
    有用
    回复
登录 后发表内容