详解mpvue scroll-view自动回弹bug解决方案


Posted in Javascript onOctober 01, 2018

表现

设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方

解决方案

打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法

function calcDiff(holder, key, newObj, oldObj) {
 if (newObj === oldObj || newObj === undefined) {
  return
 }

 if (newObj == null || oldObj == null || typeof newObj !== typeof oldObj) {
  holder[key] = newObj
 } else if (Array.isArray(newObj) && Array.isArray(oldObj)) {
  if (newObj.length === oldObj.length) {
   for (var i = 0, len = newObj.length; i < len; ++i) {
    calcDiff(holder, key + '[' + i + ']', newObj[i], oldObj[i])
   }
  } else {
   holder[key] = newObj
  }
 } else if (typeof newObj === 'object' && typeof oldObj === 'object') {
  var newKeys = Object.keys(newObj)
  var oldKeys = Object.keys(oldObj)

  if (newKeys.length !== oldKeys.length) {
   holder[key] = newObj
  } else {
   var allKeysSet = Object.create(null)
   for (var i = 0, len = newKeys.length; i < len; ++i) {
    allKeysSet[newKeys[i]] = true
    allKeysSet[oldKeys[i]] = true
   }
   if (Object.keys(allKeysSet).length !== newKeys.length) {
    holder[key] = newObj
   } else {
    for (var i = 0, len = newKeys.length; i < len; ++i) {
     var k = newKeys[i]
     calcDiff(holder, key + '.' + k, newObj[k], oldObj[k])
    }
   }
  }
 } else if (newObj !== oldObj) {
  holder[key] = newObj
 }
}

function diff(newObj, oldObj) {
 var keys = Object.keys(newObj)
 var diffResult = {}
 for (var i = 0, len = keys.length; i < len; ++i) {
  var k = keys[i]
  var oldKeyPath = k.split('.')
  var oldValue = oldObj[oldKeyPath[0]]
  for (var j = 1, jlen = oldKeyPath.length; j < jlen && oldValue !== undefined; ++j) {
   oldValue = oldValue[oldKeyPath[j]]
  }
  calcDiff(diffResult, k, newObj[k], oldValue)
 }
 return diffResult
}

2.找到 throttleSetData 修改为

var throttleSetData = throttle(function (page, data) {
 page.setData(diff(data, page.data));
}, 50);

3.找到 updateDataToMP 方法, 将 throttleSetData 的调用方式改为

throttleSetData(page, data);

希望官方早日修复,参考:

使用脏检查优化每次更新数据时都会传输大量数据的问题, 解决删除回退, 列表忽然滚动到顶部等问题

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
js实现多图和单图上传显示
Dec 18 Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
You might like
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PDO::errorCode讲解
2019/01/28 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
JS之小练习代码
2008/10/12 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
授权委托书样本
2014/04/03 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
客服专员岗位职责
2015/02/10 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
医院消毒隔离制度
2015/08/05 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
SQL中的三种去重方法小结
2021/11/01 SQL Server
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫