Framework7开发笔记

1、触发返回键的时候，获取当前页面内容

myApp.getCurrentView()

获取当前页面名字：

myApp.getCurrentView().activePage.name

2、关闭所以弹出层

myApp.hidePreloader();

3、JS代码执行返回

mainView.router.back();

4、自定义触发事件时弹出页面

mainView.router.loadPage('demo.html');

5、获取上一个页面通过url传递过来的参数
比如：demo.html?id=1234&key=3454

myApp.onPageInit('movie-detail', function(e) {
    var page = e.query;
    myApp.alert(page.id);
    myApp.alert(page.key);
});

6、判断是iOS还是Android设备

//app.js
// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

// Determine theme depending on device
var isAndroid = Framework7.prototype.device.android === true;
var isIos = Framework7.prototype.device.ios === true;

// Set Template7 global devices flags
/*Template7.global = {
    android: isAndroid,
    ios: isIos
};*/
// Change Through navbar layout to Fixed
/*if (isAndroid) {
    // Change class
    $$('.view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
    // And move Navbar into Page
    $$('.view .navbar').prependTo('.view.page');
}*/

或者可以用UA拿设备

var ua = navigator.userAgent.toLowerCase();
var isIos, isAndroid;
if (/iphone|ipad|ipod/.test(ua)) {
    isIos = true;
} else if (/android/.test(ua)) {
    isAndroid = true;
}
var myApp = new Framework7({
    material: isAndroid ? true : false,
    materialRipple: false,
    imagesLazyLoadPlaceholder: "/Images/placeholder.jpg",
     imagesLazyLoadSequential: true,
    imagesLazyLoadThreshold: 50,
    smartSelectBackOnSelect: true
});
var $$ = Dom7;
// Add view
var mainView = myApp.addView('.view-main', {});
// Add CSS Styles
if (isAndroid) {
    $$('head').prepend('<link rel="stylesheet" href="/assets/F7/css/framework7.material.min.css">');
    $$('head').append('<link rel="stylesheet" href="/assets/sjn/less/my-app.material.css">');
} else {
    $$('head').prepend('<link rel="stylesheet" href="/assets/F7/css/framework7.ios.min.css">');
    $$('head').append('<link rel="stylesheet" href="/assets/sjn/less/my-app.material.css">');
}

7、把选中的添加到数组前面，没选中的排下面
因为创建一个对象和数组的方式，消耗内存，所以用jquery的prepend和append直接插入目标节点。

$.ajax({
    type: "GET",
    cache: false,
    url: url,
    data: param,
    dataType: "html",
    success: function (res) {
        hotel_list = eval("(" + res + ")");
        if (hotel_list.length == 0) return;
        var item_template = $("#Template_HotelItem");
        //var selected;
        //var noSelected=[];
        //var arrHotel = [];

        $.each(hotel_list, function (i, item) {
            var newitem = item_template.clone(true);
            newitem.removeAttr("id");
            newitem.removeAttr("style");
            newitem.find(".hotel_id").text(item.hotelid);
            newitem.find(".hotel_name").text(item.namechs);
            newitem.find(".hotel_name_pinyin").text(item.namechs);
            newitem.find(".hotel_postcode").text(item.postcode);
            newitem.find(".hotel_address").text(item.addresschs);
            newitem.find("input[name='RdHotel']").val(i + 1);
            if (sessionStorage.userHotleId && sessionStorage.userHotleId == item.hotelid.toString()) {
                newitem.find(".RdHotel").attr("checked", "checked");
                //selected = newitem;
                //arrHotel.unshift(newitem);
                $("#HotelList").prepend(newitem);
            }
            else {
                //arrHotel.push(newitem);
                $("#HotelList").append(newitem);
            }
        });

        //if (selected)
        //{
        //    $("#HotelList").append(selected);
        //}
        //$.each(arrHotel, function (i, item) {
        //    $("#HotelList").append(item);
        //});

        myApp.hideIndicator();
    },
    error: function (xhr, ajaxOptions, thrownError) {
        myApp.hideIndicator();
    }
});