view.js 2.01 KB
/*
 * @Author: Targaryen
 * @Date: 2017-04-26 17:15:50
 * @Last Modified by: Targaryen
 * @Last Modified time: 2017-05-02 14:43:23
 */
'use strict';
import {View} from 'js/yoho-mvc';

class ListView extends View {
    constructor() {
        super('#guangList');

        this.list = $('#info-list');
        this.nav = this.$base.find('#guang-nav');
        this.navItem = this.nav.find('.guang-nav-item');

        this.beforeScroll = document.body.scrollTop; // 滚动前位置记录

        this.on('touchend touchcancel', 'li', this.tabClick.bind(this));

        $(window).scroll(() => {
            window.requestAnimationFrame(this.scrollToLoadMore.bind(this));
        });

    }

    /**
     * Tab 切换
     * @param {*} e
     */
    tabClick(e) {
        this.beforeScroll = document.body.scrollTop; // 滚动前位置记录

        let $this = $(e.currentTarget);

        this.navItem.removeClass('focus');
        $this.addClass('focus');

        this.emit('tabchange', $this.data('type'));
    }

    /**
     * 列表改变
     * @param {*} html
     */
    listChange(html) {
        this.list.html(html);
    }

    /**
     * 列表追加
     * @param {*} html
     */
    listAppend(html) {
        this.list.append(html);
    }

    /**
     * 获取默认 Type
     */
    getType() {
        return this.navItem.find('li.focus').data('type');
    }

    /**
     * 滚动加载更多
     */
    scrollHandler() {
        if ($(window).scrollTop() > this.list.height() * 0.5) {
            let type = this.getType();

            this.emit('loadmore', type);
        }
    }

    /**
     * 滚动控制
     */
    scrollToLoadMore() {
        setTimeout(() => {
            let afterScroll = document.body.scrollTop;

            if (afterScroll - this.beforeScroll > 0) {
                window.requestAnimationFrame(this.scrollHandler.bind(this));
                this.beforeScroll = afterScroll;
            } else {
                return false;
            }
        }, 5);
    }
}

module.exports = {
    ListView
};