在开发小程序的过程中遇到了在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
,以此类推。如果笔者的解决办法帮助到您,记得点小心心 ღ( ´・ᴗ・` )比心。
网友评论