美文网首页
微信小程序 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