Appcan开发-九宫格(类美团顶部滑动九宫格)

提供者:Smallbyte.cn2017/11/16 10:50:32已有326人阅读

一、文件引入

<script src="js/swiper/js/swiper.min.js"></script>
<link rel="stylesheet" href="js/swiper/css/swiper.min.css">

二、效果

1.png

三、实现方法

appcan.define("grid", function($, exports, module) {
    var model_Item = '<div class="grid-item ub-ver" id="idGridItem_<%=data.name%>" style="width:<%=options.tile.width%>%;">';
    model_Item  = '<%=content%>';
    model_Item  = '</div>';
    var itemTemplate = appcan.view.template(model_Item);
    var model_NullItem = '<div class="grid-null-item ub-ver" style="width:<%=options.tile.width%>%;"></div>';
    var itemNullTemplate = appcan.view.template(model_NullItem);
    var model_Row = '<div class="ub ub-f1 grid-rows"><%=content%></div>';
    var rowTemplate = appcan.view.template(model_Row);
    var model_Page = '<div class="swiper-slide ub-ver grid-page ub-f1"><%=content%></div>';
    var pageTemplate = appcan.view.template(model_Page);
    function GridView(options) {
        appcan.extend(this, appcan.eventEmitter);
        var self = this;
        self.options = $.extend({
            selector : "body",
            pagination : true,
            maxRowCount : 2,
            columnCount : 3
        }, options, true);
        self.ele = $(self.options.selector);
        self.options.totalWidth = self.ele.offset().width;
        var width = 1.0 * 100 / self.options.columnCount;
        //self.options.totalWidth / self.options.columnCount;
        //片大小
        self.options.tile = {
            width : width,
            height : width * 12 / 11
        };
        if (self.options.data) {
            self.set(data);
        }
    };
    GridView.prototype = {
        buildItems : function(data) {
            var self = this;
            //self.options.totalRowCount;
            //self.options.totalTileCount;
            //self.options.pageCount;
            //self.options.columnCount;
            var index = 0;
            self.options.gridSlides = [];
            for (var i = 0; i < self.options.pageCount; i  ) {
                var pageRows = [];
                for (var j = 0; j < Math.min(self.options.totalRowCount, self.options.maxRowCount); j  ) {
                    var rowCols = [];
                    for (var ci = 0; ci < self.options.columnCount; ci  ) {
                        var item = undefined;
                        if (index < data.length) {
                            var cnt = "";
                            if (self.options.drawItem)
                                cnt = self.options.drawItem(data[index]);
                            item = $(itemTemplate({
                                data : data[index],
                                options : self.options,
                                content : cnt
                            }));
                            var g_data = undefined;
                            if (self.options.attachData)
                                g_data = self.options.attachData(data[index]);
                            else
                                g_data = JSON.stringify(data[index]);
                            $(item).data('g_data', g_data);
                        } else {
                            item = $(itemNullTemplate({
                                options : self.options
                            }));
                        }
                        index  ;
                        rowCols.push(item[0].outerHTML);
                    }
                    var row = $(rowTemplate({
                        content : rowCols.join(''),
                        options : self.options
                    }));
                    pageRows.push(row[0].outerHTML);
                }
                var page = $(pageTemplate({
                    content : pageRows.join(''),
                    options : self.options
                }));
                self.options.gridSlides.push(page[0].outerHTML);
            }
            return self.options.gridSlides.join('');
        },
        setPagination : function(id) {
            var self = this;
            return $('<div id="'   id   '" class="swiper-pagination"></div>');
        },
        set : function(data) {
            var self = this;
            self.ele.children().remove();
            self.container = self.container || $('<div class="swiper-wrapper"></div>');
            self.container.css({
                width : self.options.totalWidth
            });
            self.container.empty();
            if (self.pagination)
                self.pagination.empty();
            self.options.data = data;
            self.options.totalRowCount = data.length % self.options.columnCount == 0 ? (data.length / self.options.columnCount) : parseInt(data.length / self.options.columnCount)   1;
            self.options.totalTileCount = self.options.totalRowCount * self.options.columnCount;
            self.options.pageCount = self.options.totalRowCount % self.options.maxRowCount == 0 ? (self.options.totalRowCount / self.options.maxRowCount) : parseInt(self.options.totalRowCount / self.options.maxRowCount)   1;
            //console.log(self.options)
            var items = self.buildItems(data);
            self.container.append(items);
            self.ele.append(self.container);
            var idPagination = "pagination_"   (new Date()).getTime();
            if (self.options.pagination && self.options.pageCount > 1) {
                var pagination = self.setPagination(idPagination);
                self.ele.append(pagination);
            }
            var mySwiper = new Swiper(self.options.selector, {
                pagination : {
                    el : '#'   idPagination
                }
            });
            mySwiper.on('slideChangeTransitionStart', function() {
                self.ele.data('clickdisabled', true);
            });
            mySwiper.on('slideChangeTransitionEnd', function() {
                self.ele.data('clickdisabled', false);
            });
            appcan.button(".grid-item", "ani-act", function(e) {
                e.preventDefault();
                var disabled = self.ele.data('clickdisabled');
                var data = $(this).data("g_data");
                if (!disabled && self.options.itemClick) {
                    self.options.itemClick(this, e, data);
                }
            });
            self.swiper = mySwiper;
            return self;
        }
    }
    module.exports = function(options) {
        return new GridView(options);
    };
});
    var grid = appcan.grid({
     selector : '#'   groupId,
     maxRowCount : maxRow,//最大显示行数
     columnCount : len,//每行列数
     pagination : true,//是否显示底部圆圈
     attachData : function(data) {//绑定数据到item
       return data.name;
     },
     drawItem : function(data) {//构建Item dom
       var html = "";
       html  = '<div>';
       html  = '</div>';
       return html;
     },
     itemClick : function(o, e, data) {//item点击事件
     }
    });
    grid.set(datas);//datas为json数组对象


评论列表

发表评论

评论内容:
新随笔