JS实现二级列表（包含下拉刷新、上拉加载更多、侧滑操作等）

本篇文章讲述的是使用js实现可收缩二级列表，包含以下特性：

1，点击打开／收缩二级列表；

2，列表下拉刷新数据；

3，列表上拉加载更多数据；

4，列表item项可侧滑操作（类似于QQ和微信）；

5，数据缓存；

先上效果图：

进入正题，下面是具体实践：

功能实现使用到了Framework7框架，Framework7官网地址为：http://framework7.taobao.org。

后面我会上传完整demo（包含Framework7库，可直接使用）。

一，准备工作

1，引入Framework7库；

引入Framework7的详细教程我就不写了，可以直接看官网教程：http://framework7.taobao.org/get-started/#.WO8wgVK75bU。也可以直接下载这篇文章的demo，demo里已引入所有文件并做好了所有配置，可供参考。

二，具体实现

依旧简单粗暴贴代码吧。下面是完整代码文件结构：

以上图示文件中，主要代码有：monitor_main.js、accordion.js、monitor_main.html、monitor_main_tpl.html、monitor_main.css，其余均为Framework7库文件或配置文件。下面贴出主要代码：

1，页面布局monitor_main.html

<div class="pages navbar-through">
    <div data-page="monitor_main" class="page">
        <div class="page-header" style="position: absolute;z-index:9">
            <div class="page-header-inner">
                <div class="left">
                    <a href="#" class="link">
                        <img src="images/monitor/menu.png" class="nav_open_panel">
                    </a>
                </div>
                <div class="center">JS二级列表</div>
                <div class="right">
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div style="width:100%; margin-top:0px; height:100%;" id="monitor_areas_list"
             class="page-content pull-to-refresh-content infinite-scroll" data-ptr-distance="55" data-distance="1">

            <div class="pull-to-refresh-layer">
                <div class="preloader cus-preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="list-block cusv1-accordion-list" style="margin: 48px 0">
                <ul id="areas_ul">
                </ul>
            </div>
        </div>
    </div>
</div>

2，列表使用模板 monitor_main_tpl.html

<li class="cusv1-accordion-item area_accordion_item" data-area_id={{item_area_id}} data-area_index={{item_area_index}}>
    <a href="#" class="item-link item-content accordion-item-header" style="display:block">
        <div class="area_list_item_unit1">
            <span class="area_list_source">{{item_area_name}}</span>
            <span class="area_equip_num">{{item_equip_num}}</span>
            <img src="images/monitor/icon_arrow_to_right.png" class="icon_to_expand_area">
        </div>
        <div class="area_list_item_unit2">
            <img src="images/monitor/monitor_location_icon.png" class="loc_icon"/>
            <span class="equip_list_location" style="width:80%">{{item_area_location}}</span>
        </div>
    </a>
    <div class="accordion-item-content">
        <div class="list-block">
            <ul style="padding-left: 0">
                {{#each subs}}
                <li class="swipeout equip_according_list_item"
                    data-area_id={{area_id}} data-device_id={{device_id}} data-device_name={{device_name}}
                    data-isConcerned={{isConcerned}}>
                    <div class="swipeout-content">
                        <div class="concerns_click_area">
                            <img class="expanded_equips_item_state" src="{{concerns_state_icon}}"/>
                        </div>
                        <div class="expanded_equips_click_area">
                            <span class="expanded_equip_item_source">{{device_name}}</span>
                            <img src="images/monitor/icon_arrow_to_right.png" class="icon_to_equip_details">
                        </div>
                    </div>
                    <div class="swipeout-actions-right">
                        <a href="#" class="swipeout-close cancle_concerns equips_item_swipeout_btn"
                           style="background-color:{{btn_item_left_bg}}">{{btn_item_left_text}}</a>
                    </div>
                </li>
                {{/each}}
            </ul>
        </div>
    </div>
</li>

3，收缩列表工具类 accordion.js

/*===============================================================================
 ************   Accordion   ************
 ===============================================================================*/
(function () {
    var $ = $$, app = myApp;

    app.accordionOpenv1 = function (item) {
        item = $(item);
        var list = item.parents('.cusv1-accordion-list').eq(0);
        var content = item.children('.accordion-item-content');
        if (content.length === 0) content = item.find('.accordion-item-content');
        var expandedItem = list.length > 0 && item.parent().children('.accordion-item-expanded');
        if (expandedItem.length > 0) {
            app.accordionClose(expandedItem);
        }
        content.css('height', content[0].scrollHeight + 'px').transitionEnd(function () {
            if (item.hasClass('accordion-item-expanded')) {
                content.transition(0);
                content.css('height', 'auto');
                var clientLeft = content[0].clientLeft;
                content.transition('');
                item.trigger('opened');
            }
            /* else {
             content.css('height', '');
             item.trigger('closed');
             } */
        });
        item.trigger('open');
        item.addClass('accordion-item-expanded');
    };
    app.accordionClosev1 = function (item) {
        item = $(item);
        var content = item.children('.accordion-item-content');
        if (content.length === 0) content = item.find('.accordion-item-content');
        item.removeClass('accordion-item-expanded');
        content.transition(0);
        content.css('height', content[0].scrollHeight + 'px');
        // Relayout
        var clientLeft = content[0].clientLeft;
        // Close
        content.transition('');
        content.css('height', '').transitionEnd(function () {
            /* if (item.hasClass('accordion-item-expanded')) {
             content.transition(0);
             content.css('height', 'auto');
             var clientLeft = content[0].clientLeft;
             content.transition('');
             item.trigger('opened');
             }
             else {*/
            content.css('height', '');
            item.trigger('closed');
            // }
        });
        item.trigger('close');
    };

})();

4，逻辑实现 monitor_main.js

/**
 * Created on 2016/12/18.
 */

var $$ = Dom7;

var myApp = new Framework7();

var mainView = myApp.addView('.view-main');

var utils = {
    post: function (data, sf, ef, p) {
        var url = utils.postUrl();
        $$.ajax({
            url: url,
            async: true,
            method: 'POST',
            contentType: 'text/plain',
            crossDomain: true,
            data: data,
            success: function (e) {
                if ("function" == typeof sf)
                    sf(e, p);
            },
            error: function (e) {
                console.log(e);
                if ("function" == typeof ef)
                    ef(e, p);
            }
        });
    },
    get: function (url, sf, ef, p) {
        $$.ajax({
            url: url,
            async: true,
            method: 'GET',
            contentType: 'application/x-www-form-urlencoded',
            crossDomain: true,
            success: function (e) {
                if ('function' == typeof sf)
                    sf(e, p);
            },
            error: function (e) {
                if ('function' == typeof ef)
                    ef(e, p);
            }
        });
    }
}

var monitorMain = function () {
    var page, refreshContent, infiniteScroll, isLoading = false, isAreasLoading = false, data
        , templateStr, template, distreeData, cacheDatas = {}, isOperated = false, swipeout_item_data = {};

    /*
     * 获取模板文本
     * */
    $$.get("pages/monitor/monitor_main_tpl.html", function (data) {
        templateStr = data;
    });

    /*
     * 加载监控页面
     * */
    mainView.router.load(
        {
            url: 'pages/monitor/monitor_main.html'
        }
    );

    /*
     * 页面pageBeforeAnimation回调
     * */
    $$(document).on('pageBeforeAnimation', function (e) {
        var page = e.detail.page;
        if (page.name == "monitor_main") {
            beforeAnimal(page);
        }
    });

    /*
     * 页面pageBeforeAnimation回调执行动作
     * */
    function beforeAnimal(page) {
        var container = $$(page.container)
        container.find('.navbar').removeClass('navbar-hidden');
        container.find('.pull-to-refresh-content').css({'margin-top': '-44px', 'padding-bottom': '44px'});
        container.find('.pull-to-refresh-layer').css({'margin-top': '0'});
    }

    /*
     * 页面pageInit回调
     * */
    $$(document).on('pageInit', function (e) {
        page = e.detail.page;
        if (page.name == "monitor_main") {
            init(page);
        }
    });

    /*
     * 页面pageInit回调执行动作
     * */
    function init(p) {
        page = $$(p.container);
        refreshContent = page.find('.pull-to-refresh-content');
        infiniteScroll = page.find('.infinite-scroll');
        template = Template7.compile(templateStr);
        //查询数据
        beginQuery();
        //绑定事件
        bindEvent("on");
        //构建文本
        buildAreasBox(distreeData);
        // 缓存数据-保存数据到sessionStorage,缓存模块相关操作逻辑代码较多，此demo中已去除
        // sessionStorage.setItem("distreeData", JSON.stringify(distreeData));
    }

    /*
     * 查询数据
     * 先从缓存获取数据，缓存数据为空时再网络请求/模拟数据
     * 缓存模块相关操作逻辑代码较多，因缓存相关非此demo的重点，此demo中已去除
     * */
    function beginQuery() {
        // distreeData = JSON.parse(sessionStorage.getItem("distreeData"));
        if (distreeData == null) {
            // getMonitorAreasInfo("refresh");
            //无网络环境请求数据，此处自行组装模拟数据
            assembleAreasData("refresh");
        } else {
            buildAreasBox(distreeData);
        }
    }

    /*
     * 绑定／卸载事件
     * */
    function bindEvent(t) {
        var method = t == "on" ? t : "off";
        if (refreshContent) {
            //列表下拉刷新事件
            refreshContent[method]('refresh', refleshHandler);
        }
        if (infiniteScroll) {
            //列表上拉加载更多事件
            infiniteScroll[method]('infinite', loadMoreHandler);
        }
        if (page) {
            //二级列表打开／收缩事件
            page[method]('click', ".accordion-item-header", accordionToggle);
        }
    }

    /*
     * 构建列表文本
     * */
    function buildAreasBox(items) {
        data = items;
        var i, item, htmlstr = '', areaUl = page.find("#areas_ul");
        for (i = 0; i < items.length; i++) {
            item = items[i];
            htmlstr += template(item).trim();
        }
        //给列表插入文本
        areaUl.html(htmlstr);
    }

    /*
     * 渲染
     * 非此demo的重点，此demo中已去除相关代码
     * */
    function render(items) {
        cacheDatas = items;
        for (var key in items) {
            var el = page.find(".data-" + key);
            el.text(items[key]);
        }
    }

    /*
     * 查询数据
     * */
    function queryData() {
        if (isLoading) {
            resetState();
            return;
        }
        isLoading = true;
        // getMonitorAreasInfo("refresh");
        //无网络环境请求数据，此处自行组装模拟数据
        assembleAreasData("refresh");
    }

    /*
     * 重置状态
     * */
    function resetState() {
        isLoading = false;
        myApp.pullToRefreshDone();
        myApp.hideIndicator();
    }

    /*
     * destroy页面
     * */
    function destroyPage(p) {
        console.log("destroy warning main page");
        cacheDatas = {};
        bindEvent("off");
    }

    /*
     * 模拟一级列表（区域）数据
     * */
    function assembleAreasData(type) {
        distreeData = [];
        for (var i = 0; i < 12; i++) {
            var areaId = '0_' + i;
            var subsData = simulateEquipDatas(areaId);
            distreeData[i] = {
                item_area_index: i,
                item_area_id: areaId,
                item_area_name: '数控机床区' + i,
                item_equip_num: subsData.length,
                item_area_location: '华南地区／深圳分公司／' + i + '号厂房／中区',
                subs: subsData
            }
        }
    }

    /*
     * 模拟二级列表（设备）数据
     * */
    function simulateEquipDatas(areaId) {
        var equipsArr = [];
        for (var i = 0; i < 6; i++) {
            equipsArr[i] = {
                concerns_state_icon: "images/monitor/icon_concerns_no.png",
                isConcerned: false,
                btn_item_left_bg: 'darkorange',
                btn_item_left_text: '点击关注',
                device_id: '0_1_' + i,
                device_name: '数控切割机' + i,
                area_id: areaId
            }
        }
        return equipsArr;
    }

    /*
     * 网络请求一级列表（区域）数据
     * */
    function getMonitorAreasInfo(type) {
        var data = JSON.stringify('post_data');
        var params = {
            url: 'http://***',
            data: data
        }
        utils.post(params, function (e) {
            resetState();
            distreeData = [];
            // distreeData =
        }, function (e) {
            console.log("连接服务器失败，请检查网络");
            resetState();
        });
    }

    /*
     * 网络请求二级列表（设备）数据
     * */
    function getEquipsInfoByAreaId(area_id, _callback) {

        var data = {}
        data = JSON.stringify(data);
        var params = {
            url: 'http://***',
            data: data
        }
        utils.post(params, function (e) {
            var equipsArr = [];
            _callback(equipsArr);
        }, function (e) {
            console.log("连接服务器失败，请检查网络");
            resetState();
        });
    }

    /*
     * 二级列表打开／收缩事件
     * */
    function accordionToggle(e) {
        var item = $$(e.target).parents(".cusv1-accordion-item");
        if (item.length === 0) return;
        if (item.hasClass('accordion-item-expanded')) {
            item.find(".icon_to_expand_area").attr("src", "images/monitor/icon_arrow_to_right.png");
            myApp.accordionClosev1(item);
        } else {
            myApp.accordionOpenv1(item);
            item.find(".icon_to_expand_area").attr("src", "images/monitor/icon_arrow_to_bottom.png");
        }
    }

    /*
     * 刷新事件-列表下拉刷新
     * */
    function refleshHandler(e) {
        console.log("区域列表下拉刷新");

        myApp.showIndicator();

        queryData();

        myApp.hideIndicator();

        // 加载完毕需要重置
        myApp.pullToRefreshDone();
    }

    /*
     * 加载事件-列表上拉加载更多
     * */
    function loadMoreHandler(e) {
        console.log("区域列表上拉加载更多");

        // 如果正在加载，则退出
        if (isAreasLoading) return;

        // 设置flag
        isAreasLoading = true;

        //TODO  上拉加载对应操作
        // getMonitorAreasInfo('loadMore');
        //无网络环境请求数据，此处自行组装模拟数据
        // assembleAreasData("loadMore");
    }

    /*****************************************item侧滑处理-start********************************************/

    /*
     * item侧滑打开事件触发
     * 在item侧滑打开事件回调中获取当前item项数据
     * */
    $$(document).on('open', '.equip_according_list_item', function () {
        swipeout_item_data = {};
        swipeout_item_data[0] = $$(this).attr("data-device_id");
        swipeout_item_data[1] = $$(this).attr("data-isConcerned");
        swipeout_item_data[2] = $$(this).attr("data-device_name");
        swipeout_item_data[3] = $$(this).attr("data-area_id");
    });

    /*
     * 侧滑按钮点击事件
     * 在item侧滑按钮点击事件回调中处理数据变更
     * */
    $$(document).on('click', '.equips_item_swipeout_btn', function () {
        //获取当前item项
        var item = page.find(".equip_according_list_item[data-device_id ='" + swipeout_item_data[0] + "']");
        if (swipeout_item_data[1] == 'true') {
            item.attr('data-isConcerned', false);
            // TODO 对应数据库操作和缓存操作
        } else {
            item.attr('data-isConcerned', true);
            // TODO 对应数据库操作和缓存操作
        }
        isOperated = true;
    });

    /*
     * item侧滑关闭事件触发
     * 在item侧滑关闭事件回调中更新UI
     * 根据isOperated判断是否有点击侧滑按钮，处理对应逻辑
     * */
    $$(document).on('closed', '.equip_according_list_item', function (e) {
        if (isOperated) {
            //有点击侧滑按钮
            if (swipeout_item_data[1] == 'true') {
                //当前为关注状态时，点击后应更新UI为未关注状态
                $$(this).find('.expanded_equips_item_state').attr('src', 'images/monitor/icon_concerns_no.png');
                $$(this).find('.equips_item_swipeout_btn').css('background-color', 'darkorange');
                $$(this).find('.equips_item_swipeout_btn').text('点击关注');
                swipeout_item_data[1] = false;
            } else {
                //当前为未关注状态时，点击后应更新UI为关注状态
                $$(this).find('.expanded_equips_item_state').attr('src', 'images/monitor/icon_concerns_yes.png');
                $$(this).find('.equips_item_swipeout_btn').css('background-color', 'lightgray');
                $$(this).find('.equips_item_swipeout_btn').text('取消关注');
                swipeout_item_data[1] = true;
            }
            isOperated = false;
        } else {
            //未点击侧滑按钮

        }
    });

    /*****************************************item侧滑处理-end********************************************/

    return {
        init: init,
        beforeAnimal: beforeAnimal,
        resetState: resetState,
        refleshHandler: refleshHandler,
        loadMoreHandler: loadMoreHandler,
        bindEvent: bindEvent,
        destroyPage: destroyPage
    }
}();

三，写在后面

1，本demo纯手撸，不足之处欢迎批评指正；

2，本demo是我从实际项目中剥离出来的，因本篇博客的主题是js二级列表的实现，所以已剔除网络请求、数据库操作、缓存操作、异常处理以及其他相关联部分实现代码；

3，在实际项目中，已使用此技术方案实现所有需求，但之后又因需求变更而被废弃；

4，后面产品经理要求一级列表和二级列表均能下拉刷新和上拉加载，还提出了一些其他的操作需求，一番蛋疼之后我使用全新技术方案都实现了，后面有空了再整理出来；

5，不明之处欢迎交流讨论；