美文网首页
微信小程序 iPhone6 ,iso10版本 scroll-vi

微信小程序 iPhone6 ,iso10版本 scroll-vi

作者: 前端熊 | 来源:发表于2019-04-23 11:32 被阅读0次

在开发小程序的过程中遇到了在iPhone6 下 scroll-view滚动无效的问题

微信社区同样的问题链接
微信官方在社区每周 | 上周社区问题反馈以及功能优化更新(03.04-03.08)也说明了正在修复此问题,可是在后面的社区每周中也未有提到过此问题的解决办法

解决方法

在笔者的借来iPhone6之后经过一上午的摸索实践发现了解决办法

  • 问题重现
    • scroll-view外层有父盒子的情况下话,未设置固定高度,这里指的是 scroll-view元素没有具体的设置 height:xxx ( 即使设置了flex也无效 )
  • 解决
    • scroll-view元素上设置 height:100% 完美解决此问题

微信社区重现代码片段解决办法

//modal.wxml
<view class='modal-content' wx:if='{{show}}' style='height:{{height}}' catchtap='childClick' hover-stop-propagation='true' >
  <scroll-view scroll-y class='main-content' style='height:100%'> //就在此处设置height:100%
    <slot></slot>
  </scroll-view>
  
  <view class='modal-btn-wrapper'>

    <view wx:if="{{isCancel}}" class='cancel-btn'  bindtap='cancel'>取消</view>
    <view class='confirm-btn'  bindtap='confirm'>确定</view>

  </view>
</view>

笔者的项目中解决办法

<view class='page'>
    <view class='top'>
      <searchbar bind:onSeek="onSeek"></searchbar>
    </view>
    <scroll-view class='mid'  scroll-y bindscrolltolower="lower" style='height:100%'>  //在此处设置 height:100%
    <view  hover-class="hover"  class='list'  bindtap="openOfficial" wx:for="{{prepareDeclarationList}}" wx:key="{{index}}">
      <view class='list-top'>
        姓名:{{item.userName}}
        <text>手机号:{{item.phoneNO}}</text>
      </view>
      <view class='list-text'>
        身份证号: {{item.idCard}}
      </view>
      <view class='list-text'>
        银行卡号: {{item.cardNO}}
      </view>
    </view>
    <view class="weui-loadmore" wx:if="{{lowerFlag}}">
      <view class="weui-loading"></view>
      <view class="weui-loadmore__tips">正在加载</view>
    </view>
    <view class="weui-loadmore weui-loadmore_line" wx:if="{{!lowerFlag}}">
      <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无更多数据</view>
    </view>
  </scroll-view>
</view>

总结

解决办法: scroll-view元素设置height:100%,如果无效请检查父元素是否设置height,以此类推。如果笔者的解决办法帮助到您,记得点小心心 ღ( ´・ᴗ・` )比心。

相关文章

网友评论

      本文标题:微信小程序 iPhone6 ,iso10版本 scroll-vi

      本文链接:https://www.haomeiwen.com/subject/ciomgqtx.html