uni-app MUI Scroll 插件滚动停止位置错误

uni-app MUI Scroll 插件滚动停止位置错误

示例代码：

Demo 代码（不附带 mui.min.js, mui.min.css）：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <link rel="stylesheet" href="../css/mui.min.css">  
    </head>  

    <body>  
        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron"></ul>  
            </div>  
        </div>  
        <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>  
        <script>  
            var deceleration = mui.os.ios?0.003:0.0009;  
            mui('#pullrefresh').scroll({  
                bounce: true, //回弹效果  
                indicators: false, //是否显示滚动条  
                deceleration: deceleration  
            });  

            function addData() {  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                for(var i = cells.length, len = i + 5; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                    table.insertBefore(li, table.firstChild);  
                }  
            }  

            for (i=0; i<20; i++) {  
                addData();  
            }  
        </script>  
    </body>  
</html>

操作步骤：

例如下面的 Demo 代码中，第一行为 Item 100：

  1. 滑动页面使页面滚动至 Item 70 附近（示例，其他位置也可以）
  2. 在接近停止滚动的时候按住屏幕使其停止滚动
  3. 最终页面停止在了 Item 97

预期结果：

滚动至 Item 70 应该也停止 Item 70 附近

实际结果：

滚动至 Item 70，停止在 Item 97 附近

bug描述：

使用 MUI Scroll 控件的时候，滑动页面，突然按住使其停止滑动，停止的位置不正确。

例如下面的 Demo 代码中，第一行为 Item 100：

  1. 滑动页面使页面滚动至 Item 70 附近（示例，其他位置也可以）
  2. 在接近停止滚动的时候按住屏幕使其停止滚动
  3. 最终页面停止在了 Item 97

屏幕录像见附件。


更多关于uni-app MUI Scroll 插件滚动停止位置错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app MUI Scroll 插件滚动停止位置错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一个临时解决办法，修改 mui.js
从 _updateTranslate: function() {
var self = this;
if (self.x !== self.lastX || self.y !== self.lastY) {
self.setTranslate(self.x, self.y);
}
self.requestAnimationFrame = requestAnimationFrame(function() {
self._updateTranslate();
});
}, 修改为 _updateTranslate: function() {
var self = this;

// 忽略 requestAnimationFrame  
// 解决在 Chromium 7x-8x 版本上打滑问题  
return self.setTranslate(self.x, self.y);

},

回到顶部