收藏
回答

scrollview不兼容iOS9.3.5

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 iOS 6.6.7 1.9.91

在 iPhone手机 系统是iOS9.3.5 上显示的是如下的异常效果。



正常的显示应该如下




现在把关键代码和样式贴下

wxml

<view class='section'>
  <navigator url='/pages/user/enjoy' class='head'>
    <view class='title'>我喜欢的方案</view>
    <image src='{{imgMap.arrowUp}}'></image>
  </navigator>
  <scroll-view scroll-x>
    <view class='content'>
      <block wx:if='{{myEnjoyList.length > 0}}'>
        <view class='item' wx:for='{{myEnjoyList}}' wx:key='enjoyItem{{index}}' data-index='{{index}}' bindtap='onTapEnjoyItem'>
          <image src='{{item.imgsrc}}' />
          <view>{{item.title}}</view>
        </view>
      </block>
      <view wx:else class='empty'>您还没有收藏过喜欢的方案哦!</view>
    </view>
  </scroll-view>
</view>


wxss


.section {
  background-color: white;
}
 
.section .head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  height: 118rpx;
}
 
.section .head .title {
  font-weight: bold;
  font-size: 36rpx;
}
 
.section .head image {
  width: 32rpx;
  height: 32rpx;
  transform: rotate(90deg);
  opacity: 0.4;
  filter: alpha(opacity=40);
}
 
.content {
  height: 230rpx;
  width: auto;
  display: flex;
  flex-direction: row;
  background-color: #fdfdfd;
  align-items: center;
  padding: 0 20rpx;
}
 
.content .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 20rpx;
}
 
.content .item image {
  width: 100%;
  height: 150rpx;
  border-radius: 6rpx;
}
 
.content .item view {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 270rpx;
  text-align: center;
}
 
.space {
  border-top: 20rpx #eee solid;
}
 
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 32rpx;
  color: #999;
}


其他android手机或开发工具都正常显示,目前发现就只有在 iOS9.3.5( iOS9的其他版本没测过)出现问题。

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

1 个回答

  • alipay
    alipay
    2018-06-28

    兄弟,我是这样写的,没遇到什么问题,你参考下:

    <scroll-view class='section_list2' scroll-x="{{true}}">
          <view class='section_list2_item' wx:for="{{recommendData.artist.child}}" wx:key="{{index}}" data-index='{{index}}' bindtap="goArtistDetail">
            <view class='icon'>
              <sd-image src='{{item.extInfo.avatarLink}}'/>
            </view>
            <view class='title line_1'>{{item.extInfo.name}}</view>
            <view class='sub-title line_1'>{{item.extInfo.introduction}}</view>
          </view>
        </scroll-view>
    .section_list2 {
      white-space: nowrap;
      margin-top: 36rpx;
    }
    .section_list2_item {
      display: inline-flex;
      width: 240rpx;
      flex-direction: column;
      align-items: center;
    }
    .section_list2_item:first-child {
       margin-left: 16rpx;
    }
    .section_list2_item:last-child {
      margin-right: 16rpx;
    }
    .section_list2_item .icon {
      width: 160rpx;
      height: 160rpx;
      border-radius: 80rpx;
      overflow: hidden;
    }
    .section_list2_item .title {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #333;
      font-family: PingFangSC-Medium;
      margin-top: 24rpx;
    }
    .section_list2_item .sub-title {
      font-size: 24rpx;
      color: #999;
      line-height: 34rpx;
      margin-bottom: 20rpx;
      max-width: 200rpx;
    }


    2018-06-28
    赞同 1
    回复 5
    • 生命過客
      生命過客
      2018-06-28

      scrollview 里面放 view wx:for  无法滑动

      2018-06-28
      回复
    • alipay
      alipay
      2018-06-28

      真机没问题呀  我的都是这样写的, 在windows 开发环境中确实有这个问题,但是mac版是没有的

      2018-06-28
      回复
    • 生命過客
      生命過客
      2018-06-28

      刚刚仔细试了下,可以了,可能之前太粗心了。   谢谢。

      2018-06-28
      回复
    • alipay
      alipay
      2018-06-28回复生命過客

      不用客气哈

      2018-06-28
      回复
    • Mz
      Mz
      04-03

      我也遇到同样的问题,请问是怎么解决的?

      04-03
      回复