iScroll5实现卡片左右滑动及动态加载打赏

iScroll5是在iScroll4的基础重构而来,使用时发现网上大部分例子都是基于iScroll4,在iScroll5上面并不适用,比如横向滚动、当前索引、元素对齐等,这些不在赘述,有需求可以考虑去看看源码(重构过的源码看起来清爽很多)。

因为自己需要一个卡片左右滑动的效果,同时还希望有边界对齐的能力,不清楚这个效果有没有类似实现,大概看了下,新版iScroll也不是很大,就直接拿来用了,效果如下图所示:

iscroll5-1

边界始终是在上面时间导航始终不会停留在文字中间,下面卡片始终只会停留在元素左侧边界,不会出现如下图所示情况:

iscroll5-2

基本效果很简单,因为不想重复造轮子,直接拿iScroll5来实现,时间导航部分还好,使用iScroll5,事先计算好要滚动元素的父级宽度,子元素直接float,然后实例化iScroll设置横向滚动和元素对齐即可,代码如下:

new IScroll('#wrapper', {
    scrollX: true,
    snap: '.item'
});

下面的卡片就有些麻烦了,因为是动态加载,期初考虑使用iscroll-infinite.js版的缓存功能(updateCache)实现(iScroll5有五个版本,分别为iscroll.js、iscroll-infinite.js、iscroll-lite.js、iscroll-probe.js、iscroll-zoom.js),尝试后发现iscroll-infinite.js只实现了纵向的缓存刷新,如果设置scrollX为true,就会出现很严重的错位,粗略看了一下,这个改起来有点麻烦,最后只好放弃使用此功能,认为操作dom后调用iscroll对象的refresh方法,结果发现开启了snap的情况下,当前索引定位会出现越界而报错,因为snap默认支持传boolean或者字符串selector,传boolean值为true的情况,操作没有出错,但是组件根据容器宽度进行对齐,明显不符合我们的需求;而传入selector的情况下,第一次初始化时候调用了_initSnap,通过this.options.snap查找到所有dom并缓存在this.options.snap,而调用refresh时并没有刷新this.options.snap的值,故而这里做了简单改动,具体代码片段如下

找到_initSnap方法

_initSnap: function () {
    this.currentPage = {};

    if ( typeof this.options.snap == 'string' ) {
        this.options.snap = this.scroller.querySelectorAll(this.options.snap);
    }

    this.on('refresh', function () {
        //...

        this.pages = [];

        //...
    });

    this.on('flick', function () {
        //...
    });
}

改为

_initSnap: function () {
    this.currentPage = {};

    if (typeof this.options.snap == 'string') {
        this.options.snapSelector = this.options.snap;
        this.options.snap = this.scroller.querySelectorAll(this.options.snap);
    }

    this.on('refresh', function () {
        //...

        this.pages = [];

        if (this.options.snapSelector) {
            this.options.snap = this.scroller.querySelectorAll(this.options.snapSelector);
        }

        //...
    });

    this.on('flick', function () {
        //...
    });
}

将配置为selector的this.options.snap属性先保留到snapSelector,然后通过this.options.snap查找元素列表并缓存,在refresh时,使用snapSelector重新查找元素列表并替换。以上“//...”表示省略部分代码,仅所示例,具体代码位置请根据所使用的版本判断(注:lite版不支持元素对齐功能)。

iScroll5实现卡片左右滑动及动态加载
文章《iScroll5实现卡片左右滑动及动态加载》二维码
  • 微信打赏
  • 支付宝打赏

已有8条评论

  1. themebetter

    重构过的源码确实不那么繁杂了。

    2016-11-18 09:56 回复
  2. 运营-子客

    部分很实用

    2016-11-14 15:52 回复
  3. vpn账号免费发放

    怪兽博客,交换链接?www.52kl.top

    2016-11-08 14:07 回复
  4. 工控资料窝

    现在双11用的就是这种

    2016-11-04 14:08 回复
  5. 湖南物流总部

    不错,很详细的介绍。

    2016-11-04 10:31 回复

(必填)

(必填)

(可选)