hm-react-cli/package-modules/anujs/packages/render/miniapp/apiForH5/scroll.js

Create a Huimei React project by module

import { handleSuccess, handleFail } from '../utils';

/**
 * 将页面滚动到目标位置
 */
function pageScrollTo({
    scrollTop,   // 要滑动的距离
    duration = 300, // 时长
    success = () => {},
    fail = () => {},
    complete = () => {},
} = {}) {
    // TODO 暂不考虑动画效果
    return new Promise(function(resolve, reject) {
        // 滑动动画
        var bounce = function(per) {
            if (per < (1/2.75)){
                return (7.5625*per*per);
            } else if (per < (2/2.75)) {
                return (7.5625 * (per -= (1.5/2.75)) * per + .75);
            } else if (per < (2.5/2.75)){
                return (7.5625 * (per -= (2.25/2.75)) * per + .9375);
            } else {
                return (7.5625 * (per -= (2.25/2.75)) * per + .984375);
            }
        };

        const container = document.getElementsByClassName('__internal__DynamicPage-container'); 
        if (container.length > 0) {
            const page = container[container.length - 1]; // 滚动的页面
            var begin = page.scrollTop; // 获取当前页面滚动条纵坐标的位置
            const distance = begin + scrollTop;   // 结束位置
            const fps = 60;  // 刷新率
            const internal = 1000/fps; // 每相隔多少ms刷新一次
            const times = duration / 1000*fps;   // 一共刷新这么多次
            const step = distance/times;  // 每次移动的距离
            const beginTime = new Date;
            var id = setInterval(function(){
                var per = (new Date - beginTime) / duration;  // 进度
                if (scrollTop>0){
                    if (begin>=distance){
                        clearInterval(id);
                        handleSuccess({ scrollTop }, success, complete, resolve);
                    } else {
                        page.style.top = begin + bounce(per) * scrollTop + 'px';
                        begin += step;
                    }
                } else if (scrollTop<0) {
                    if (begin<distance){
                        clearInterval(id);
                        handleSuccess({ scrollTop }, success, complete, resolve);
                    } else {
                        page.style.top = begin + bounce(per) * scrollTop + 'px';
                        begin += step;
                    }
                }
                page.scrollTop = begin;
            }, internal);
        } else {
            handleFail({errMsg: 'pageScrollTo fail'}, fail, complete, reject);
        }
    });
}

export default {
    pageScrollTo
};