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

表现

设置了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);

希望官方早日修复，参考：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序scroll-view组件实现滚动动画

    本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn

  • 微信小程序scroll-view实现字幕滚动

    本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下 需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:字幕滚动 通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动. wxml: <scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{s

  • 微信小程序 scroll-view隐藏滚动条详解

    微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序 scroll-view实现锚点滑动的示例

    微信小程序 scroll-view实现锚点滑动的示例

    前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

  • 微信小程序-横向滑动scroll-view隐藏滚动条

    wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

  • 小程序scroll-view组件实现滚动的示例代码

    前言:这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动. GitHub: https://github.com/Ewall1106/miniProgramDemo 1.竖向滚动 首先从简单的来,竖向滚动很简单,只用记住两点即可: 首先得设置 scroll-y 属性: 其次,一定要给 scroll-view 设置一个 height 高度: <scroll-view scroll-y style="height: 200px;"> <view cl

  • 微信小程序scroll-view横向滑动嵌套for循环的示例代码

    1.布局及样式等 (1)xml布局 <view class="container"> <scroll-view scroll-x="true"> <view class="item-content" wx:for="{{list}}" wx:for-item="item"> <view class="title">{{item.title}

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

    表现 设置了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 ==

  • 详解xshell远程连接自动断开的问题解决办法

    关于用xshell远程连接系统自动断开问题的解决办法: 1.服务器端的配置 我们都知道,作为服务器,默认一般都是被动的等待客户端的连接到来.但对基于ssh协议的xshell的运用,总是出现自动断开的情况. vi命令打开/etc/ssh/sshd_config文件,可以看到: ClientAliveInterval 用来指定服务器向客户端发送消息的时间间隔.默认是0,即不发送. ClientAliveCountMax 用来指定服务器向客户端发送消息的次数.若到达指定的次数,客户端一次也没有回复,那

  • 详解C++中的自动存储

    C++有3种管理数据内存的方式即自动存储(栈存储).静态存储和动态存储(堆存储).在不同的方式下,内存的分配形式和存在时间的长短都不同. 下面对自动存储进行说明. 自动存储(栈存储) 对于函数的形参.内部声明的变量及结构变量等,编译器将在函数执行时为形参自动分配存储空间,在执行到变量和结构变量等的声明语句时为其自动分配存储空间,因此称其为自动变量(Automatic Variable),有的教科书也称其为局部变量,在函数执行完毕返回时,这些变量将被撤销,对应的内存空间将被释放. 事实上,自动变量

  • 详解Howler.js Web音频播放终极解决方案

    前言 相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作.... 偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美 Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目,Howler.js 基于 Google 的 Web Audio API,能够帮

  • 详解Java分布式事务的 6 种解决方案

    介绍 在分布式系统.微服务架构大行其道的今天,服务间互相调用出现失败已经成为常态.如何处理异常,如何保证数据一致性,成为微服务设计过程中,绕不开的一个难题. 在不同的业务场景下,解决方案会有所差异,常见的方式有: 阻塞式重试: 2PC.3PC 传统事务: 使用队列,后台异步处理: TCC 补偿事务: 本地消息表(异步确保): MQ 事务. 本文侧重于其他几项,关于 2PC.3PC 传统事务,网上资料已经非常多了,这里不多做重复. 阻塞式重试 在微服务架构中,阻塞式重试是比较常见的一种方式.伪代码

  • 详解WMI RPC 服务器不可用的解决方案

    本文介绍了详解WMI RPC 服务器不可用的解决方案,分享给大家,具体如下: ConnectionOptions connectionOptions = new ConnectionOptions(); connectionOptions.Username = userName; connectionOptions.Password = password; ManagementScope managementScope = new ManagementScope("\\\\" + ho

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • 详解缓存穿透/击穿/雪崩原理及其解决方案

    详解缓存穿透/击穿/雪崩原理及其解决方案

    目录 1. 简介 2. 缓存穿透 2.1描述 2.2 解决方案 3. 缓存击穿 3.1 描述 3.2 解决方案 4. 缓存雪崩 4.1 描述 4.1 解决方案 5. 布隆过滤器 5.1 描述 5.2 数据结构 5.3 "一定不在集合中" 5.4 "可能在集合中" 5.5 "删除困难" 5.6 为什么不使用HashMap呢? 1. 简介 如图所示,一个正常的请求 1.客户端请求张铁牛的博客. 2.服务首先会请求redis,查看请求的内容是否存在.

  • 详解Swoole TCP流数据边界问题解决方案

    详解Swoole TCP流数据边界问题解决方案

    目录 1. 数据发送过程 2. 什么是数据边界 2.1 代码演示 3.EOF 解决方案 3.1 open_eof_check 3.2 open_eof_split 3.3 open_eof_check 和 open_eof_split 差异 4. 固定包头 + 包体解决方案 5. 总结 6. 扩展知识 6.1 字节序 1. 数据发送过程 首先由客户端将数据发往缓冲区 (服务端并不是直接收到的), 对于客户端来说,这次的数据即是发送成功了, 对于服务端是否真正的收到他是不知道的, 然后再由服务端从

  • 详解Java包装类及自动装箱拆箱

    Java包装类 基本类型 大小 包装器类型 boolean / Boolean char 16bit Boolean byte 8bit Byte short /16bit Short int 32bit Integer long 64bit Long float 32bit Float double 64bit Double void / Void Java 的包装类有两个主要的目的: Java包装类将基本数据类型的值"包装"到对象中,对基本数据类型的操作变为了对对象进行操作,从而使

随机推荐