详解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检查日期格式的函数[比较全]
Oct 17 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
在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
PHP4.04简明安装
2006/10/09 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jquery 使用简明教程
2014/03/05 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Weblogc domain问题
2014/01/27 面试题
专升本自我鉴定
2013/10/10 职场文书
运动会开幕式解说词
2014/02/05 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
房屋质量投诉书
2015/07/02 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android