详解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 相关文章推荐
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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选择排序法实现数组排序实例分析
2015/02/16 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
Angularjs中UI Router全攻略
2016/01/29 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python入门教程 python入门神图一张
2018/03/05 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
乐观大学生的自我评价
2014/01/10 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript