网站建站分辨率,移动网站开发面试题,北京微信公众号网站建设,WordPress文字添加情景描述#xff1a; 最近在uniapp项目中用到scroll-view内置组件#xff0c;有需求是在页面下拉刷新后#xff0c;让scroll-view组件区域的显示内容置顶#xff0c;也就是scroll-view区域的内容恢复不滑动的状态#xff1b; 补充#xff1a;下拉刷新操作scroll-view组件…情景描述 最近在uniapp项目中用到scroll-view内置组件有需求是在页面下拉刷新后让scroll-view组件区域的显示内容置顶也就是scroll-view区域的内容恢复不滑动的状态 补充下拉刷新操作scroll-view组件中的数据时并不会让scroll-view的卷起状态重置 为实现上面需求第一时间反应就是给scroll-view组件绑定scroll-topscroll-left属性页面在下拉刷新后控制scroll-top(scroll-left)为零即可。 相关代码片段如下
模板scroll-view classtable-body scroll-ytrue :scroll-topscrollToTopview classbody-tr v-foritem in temptext stylewidth: 35%;{{item.name}}/texttext stylewidth: 20%;{{item.laneNum}}/texttext stylewidth: 30%;{{item.deviceName}/texttext stylewidth: 15%;{{item.trafficFlow}}/text/view/scroll-viewscriptdata() {return {scrollToTop: 0,}}
下拉刷新onPullDownRefresh(){this.scrollToTop 0;}当下拉刷新时让scrollToTop值置0从而恢复scroll-view的卷起状态。 但是实际效果却并没有按当前思路来先滚动scroll-view区域再进行下拉刷新后scroll-view的卷起状态依然是下拉刷新前的状态。 踩坑调查处理
1.为调查上面的思路实现失效问题在过程中发现scroll-view组件的scroll-topscroll-left属性的属性值并不是双向绑定的其区域内容滑动时scroll-topscroll-left属性的属性值scrollToTop并不会发生变化始终是你给定的值0
2.思路是没有问题为了验证scroll-top属性的用法是否有误我将scroll-top的初始值设置了50发现页面初始后scroll-view区域页面的卷起高度发生了变化说明scroll-top属性值的用法是没有问题
3.接第2步我将在页面初始化后scroll-view区域发生滚动变化的情况下我再滚动scroll-view区域然后进行下拉刷新 执行 this.scrollToTop 0这次页面刷新后scroll-view区域的滚动状态居然按照原思路给重置了
4.为了找到第3步成功的原因与最处不成功的情况有什么不同我在第3步的执行状态下页面下拉刷新后scroll-view区域恢复初始的状态又进行了一次滑动scroll-view区域并之后再下拉刷新页面 执行 this.scrollToTop 0这一次结果又有不同页面刷新后scroll-view区域的滚动状态 又没有刷新
5.做出多次测试后发现当给scrollToTop设置初始值为0时后续再通过下拉刷新给scrollToTop 重新赋值为0时scroll-view区域的滚动状态 始终不会初始化当给scrollToTop设置初始值不为0时当后续再给scrollToTop 0 时会保证第一次下拉刷新的 scrollToTop 0 置0有效果第一次之后的下拉刷新 scrollToTop 置0 就没有效果了
6.最后在第5步基础上在每次下拉刷新时都打印scrollToTop 值发现 每次scroll-view区域滚动后scrollToTop的值都是默认设置的值并不会发生变化也就是第1步的结论并且推断 出现第5步结果的原因在 给scrollToTop 0 ,也就是初始化scroll-view区域的滚动状态时只有当scrollToTop的值 不等于0 时或者说 scrollToTop置0前 scrollToTop的就不能是0的情况下此次赋值后才有效果 。 此处 scrollToTop的置0效果就好比是 vue中的监听器只有在scrollToTop的值前后发生变化时页面才会做出对应相应这样的机制应该也是为了考虑页面的渲染性能。 原因总结
结合上面第1步第5步第6步导致页面下拉刷新后scroll-view组件区域滚动状态没有恢复初始化的原因 1.scroll-top属性值 scrollToTop的初始值为0时每次下拉刷新后scrollToTop置0都没有效果的情况 scrollToTop的值在scroll-view组件区域滚动时始终是0在下拉刷新对 scrollToTop 再一次赋值0时scrollToTop前后的值没有发生变化所以就不会出现 scroll-view区域的滚动状态重置成初始化状态。 2.scroll-top属性值 scrollToTop的初始值为50时第一次下拉刷新后scrollToTop置0有效果第一次之后续scrollToTop置0 就没有效果 的情况 这种情况下scrollToTop的初始值为50不等于0在第一次scrollToTop置0后会监测到scrollToTop的值变化从而scroll-view区域页面发生更新 scroll-view区域的滚动状态重置成初始化状态从第二次开始scrollToTop为0当后续再次置0时就重复了上面第一种情况。 解决问题思路 通过原因分析知道多次重复的将scrollToTop置0在scrollToTop前后值不变的情况下对scroll-view组件是没有效果的。 那么就需要满足一种需求就是既要让scrollToTop值每次都发生变化并且还能让scroll-view组件区域置顶。 通过尝试将scrollToTop 的值在0和1之间切换就能满足需求当scrollToTop 0 时下拉刷新让scrollToTop 1scrollToTop 值发生变化scroll-view区域页面滚动1像素几乎看不出来。
最终
onPullDownRefresh(){this.scrollToTop this.scrollToTop 0 ? -1 : 0;
}最终解决方案采用将scrollToTop 的值在0和-1之间切换在每次下拉刷新时就能保证每次下拉刷新后绑定 :scroll-top“scrollToTop” 的scroll-view组件的滚动状态都是初始化的滚动区域置顶的。 Tip
记录uniapp中scroll-view的scroll-top不生效问题的详细解决过程和思路建议越到相同问题的朋友可以用一点点时间看完比较通俗易懂个人感觉希望对你有所帮助有问题欢迎评论区交流。
