framework7使用笔记

2019独角兽企业重金招聘Python工程师标准>>>

 myApp.addView('.view-main', {
      
  });

以上这句代码一定要添加 ，否则链接的页面不能正常加载

---------------------------------------------

如果初始化时定义了preprocess，则页面上链接的自动加载将被拦截 ，需要自己定义每个链接的加载过程

//模版预处理
      preprocess: function (content, url, next) {
           if (url === 'people.html') {
               var template = Template7.compile(content);
               var resultContent = template({
                   title: 'People',
                   people: ['John', 'Ivan', 'Mary']
               })
               return resultContent;
           }else{
             return content;
           }
       }

--------------------------------------

获取动态数据加载模版内容

  //模版预处理
      preprocess: function (content, url, next) {
           if (url === 'people.html') {
             // For example, we will retreive template JSON data using Ajax and only after that we will continue page loading process
              $$.get('fakedata.json', function(data) {
               var obj = eval('(' + data + ')');
                  // Template
                  var template = Template7.compile(content);

                  // Compile content template with received JSON data
                  var resultContent = template(obj);

                  // Now we call "next" callback function with result content
                  next(resultContent);
              });
              // Now we shouldn't return anything
           }else{
             return content;
           }
       }

----------------------------

preroute早于preprocess执行 ，适合检测用户权限

无论使用 view.router.loadPage('auth.html')还是  view.router.load({ url: "auth.html"});

页面都会报错

Uncaught RangeError: Maximum call stack size exceeded

之所以会报错 大概原因是 加载auth.html时页面也触发了preroute 再次加载 无限循环 导致页面崩溃

可以选择跳出到一个独立页面解决这个问题

preroute: function (view, options) {


            if (!localStorage.getItem("login")) {
               
               
                 view.router.loadPage('auth.html'); //这句话报错
                return false; //required to prevent default router action
            }
        }

－－－－－－－－－－－－－－－－－－

初始化页面的回调：

有时候我们需要页面初始化的回调函数，比如在首页中。但是有一个问题，当我们添加 .onPage 回调的时候，应用已经初始化完成了，我们添加的回调函数不会被触发。有如下几个方法可以解决这个问题: http://docs.framework7.cn/Index/page_callbacks.html

可以利用这段代码，为页面做内容初始化

 //当页面初始化时可以回调
     onPageInit: function (app, page) {
       if (page.name === 'index') {

            console.log(page);
       }

       if (page.name === 'home-another') {

            console.log(page);
       }
     }

－－－－－－－－－－－－－－－－－－－

 返回上一页 用  <a class="back"> ,页面切换的更多设置http://docs.framework7.cn/Index/pages_ajax.html

 

----------------------------------------

view标签中的data-page属性 指view下众多page中显示的那个

---------------------------------------

一个view中的链接 点击后希望页面在另一个view中呈现，只要在链接 a标签后面加属性 data-view=".另一个view的class名"

 

－－－－－－－－－－－－－－－－－－－－

点开一个页面 希望这个页面不显示toolbar的做法有两种

1 直接在这个页面的 page 标签增加 no-toolbar 类  比如  <div data-page="about" class="page no-toolbar">

 

2 在preroute方法 里写viw.hideToolbar(); 可以配合适当的筛选条件

比如 

preroute: function (view, options) {
         view.hideToolbar();
}

－－－－－－－－－－－－－－－－－－－－－－

通过标签切换视图的例子

http://framework7.taobao.org/docs/tabs.html#.WNACIhJ97aY

------------------------------

不希望页面继续后退可以給 page标签增加  no-swipeback 类class="page no-swipeback"

转载于:https://my.oschina.net/lilugirl2005/blog/863115