资讯专栏INFORMATION COLUMN

AlloyTouch实战--60行代码搞定QQ看点资料卡

sihai / 1967人阅读

摘要:设置为,相对于高度为的来说就是。再看这一堆使用最关键的一点就是计算和的值。可以看到回调里可以拿到,也就是对象的实例,当等于代表滚到了底部,所以这里加上代表快要滚动底部已经看到了加载更多。开始任何意见和建议欢迎,团队会第一时间反馈。

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian

先验货

访问DEMO你也可以点击这里

源代码可以点击这里

如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可!

头部动画

加载更多

实现代码
var infoList = document.getElementById("infoList"),
    mockHTML = infoList.innerHTML,
    scroller = document.getElementById("scroller"),
    header = document.getElementById("header"),
    userLogo = document.getElementById("user-logo-wrapper"),
    loading = false,
    alloyTouch = null;

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    min: 160 * -20 + window.innerHeight - 202 - 50,
    max: 0,
    lockDirection: false,
    touchStart: function () {
        reastMin();
    },
    lockDirection: false,
    change: function (v) {
        if (v <= this.min + 5 && !loading) {
            loading = true;
            loadMore();
        }
        if (v < 0) {
            if (v < -140) v = -140;
            var scaleY = (240 + v) / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        } else {
            var scaleY = 1 + v / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        }
    }
})

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML += mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

function reastMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

就这么多代码。当然你要引用一个transformjs和alloy_touch.css.js。先看这一堆:

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);

Transform(xxx)是什么意思?

赋予xxx transformation能力

第一个scroller加上true代表关闭透视投影,为什么要关闭透视投影?

因为scroller里面是有文本,防止文本在IOS中模糊的情况。

header是顶部的那个蓝色的区域。为什么要设置originY和translateY?为什么要设置为-70?

因为header的高度为140px,用户向上滚动的过程中,需要对其进行scaleY变换。通常我们的做法是设置CSS3 transform-origin为 center top。而使用transformjs之后,可以抛弃transform-origin,使用originY或者originX属性便可。originY 设置为 -70,相对于高度为140的header来说就是center top。

再看这一堆:

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    lockDirection: false,
    min: 160 * -20 + window.innerHeight - 202 - 50,
    max: 0,
    touchStart: function () {
        resetMin();
    },
    lockDirection: false,
    ...
    ...
    ...
})
...
...
function resetMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}

使用AlloyTouch最关键的一点就是计算min和max的值。min和max决定了可以滚到哪里,到了哪里会进行回弹等等。这里max是0毫无疑问。

但是min那一堆加减乘除是什么东西?

这里首次加载是20行数据,每一行高度大概160,主意是大概, window.innerHeight是视窗的高度,202px是滚动的容器的padding top的值,50px是用来留给显示加载更多的...

如上图所示,主要是需要求???的高度。

那么怎么解决大概160*20的问题?

touchStart的时候reastMin。resetMin会去通过getComputedStyle计算整个scroller的高度。

maxSpeed是干什么用的?

用来限制滚动的最大速度,个人感觉调整到2挺舒适,这个可以根据场景和被运动的属性灵活配置。

outFactor是干什么用的?

用来设置超出min或者max进行拖拽的运动比例系数,系数越小,超出min和max越难拖动,也就是受到的阻力越大。

lockDirection是干什么用的?

lockDirection默认值是true。代表用户起手时候是横向的,而你监听的是竖直方向的touch,这样的话是不会触发运动。只有起手和监听对应上才会有触摸运动。这里把lockDirection设置成false就没有这个限制,不管用户起手的direction,都会有触摸运动。

再看AlloyTouch注入的change事件!头部动效核心的一个配置函数:

change: function (v) {
    if (v <= this.min + 5 && !loading) {
        loading = true;
        loadMore();
    }
    if (v < 0) {
        if (v < -140) v = -140;
        var scaleY = (240 + v) / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    } else {
        var scaleY = 1 + v / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    }
}

v代表当前被运动对象的被运动属性的当前的值,根据这个v去做一些效果和加载更多。

什么时候加载更多?

当滚动你能看到加载更多的时候去加载更多

什么时候能看到加载更多?

v <= this.min + 5。 可以看到change回调里可以拿到this,也就是AlloyTouch对象的实例,当v等于this.min代表滚到了底部,所以这里加上5代表快要滚动底部已经看到了加载更多。就去执行loadMore函数。

loading是干什么用的?

防止重复loadMore用得,因为change执行得很频繁,所以这里会通过loading的状态去锁上。

下面一堆设置scaleX、scaleY、translateY以及一堆数字是怎么来的?

慢慢调试得出的最佳效果~~反正就是根据v的数值映射到 header和用户头像的transform属性上,这里就不一一讲了。

再看loadMore:

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML += mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

这里使用了一段假的HTML去模拟AJAX异步请求以及数据转HTML的过程,整个耗时500ms,500ms后会去:

插入HTML

重置loading状态

重置AlloyTouch的min

最后:

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

阻止掉整个document的默认事件,不会把整个页面拖下来,在手Q里的话,你就看不到网址和X5内核提供技术支持了。

开始AlloyTouch

Github:https://github.com/AlloyTeam/AlloyTouch

任何意见和建议欢迎new issue,AlloyTouch团队会第一时间反馈。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55895.html

相关文章

  • AlloyTouch实战--60代码搞定QQ看点资料

    摘要:设置为,相对于高度为的来说就是。再看这一堆使用最关键的一点就是计算和的值。可以看到回调里可以拿到,也就是对象的实例,当等于代表滚到了底部,所以这里加上代表快要滚动底部已经看到了加载更多。开始任何意见和建议欢迎,团队会第一时间反馈。 原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 showImg(https://...

    wenyiweb 评论0 收藏0
  • 好棒的前端文章 - 收藏集 - 掘金

    摘要:你应该知道的种设计模式前端掘金每位开发者都努力写出可维护的易读的可复用的代码。继承关系本前端书籍整理,高清前端掘金发现了一个下载前端书籍的地方,分享给大家。 你应该知道的 4 种 JavaScript 设计模式 - 前端 - 掘金每位开发者都努力写出可维护的、易读的、可复用的代码。随着应用变得越来越大,代码的结构也越来越重要。设计模式验证了解决这个挑战的重点——在特定环境中,对同类事物...

    Maxiye 评论0 收藏0
  • AlloyTouch实现下拉刷新

    摘要:但是在某些场景下,还是需要拥有自身的下拉刷新的能力。比如需要统一和安卓的体验需要自定义下拉刷新动画需要已内的背景或者其他元素有联动交互反馈而拖动整个的下拉刷新无法满足这些场景。很明显非常擅长处理下拉刷新的需求。 原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh 效果展示 showImg(https://s...

    RdouTyping 评论0 收藏0
  • AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。 注意,虽然是扫码体验,但是AlloyTouch.FullPag...

    _ivan 评论0 收藏0
  • AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。 注意,虽然是扫码体验,但是AlloyTouch.FullPag...

    neuSnail 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<