增加滚动列表示例

tower1229 · Jan 24, 2018 · c624519 · c624519
1 parent ed93527
commit c624519
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 2 deletions.
diff --git a/view/demo/index/content.html b/view/demo/index/content.html
@@ -119,7 +119,7 @@
     <div class="item" active="1,demo,chooseList">
         chooseSelect (多级选择)
     </div>
-    <div class="item" id="openWeb">
+    <div class="item" id="openWeb" active>
         web Viewer (打开网页)
     </div>
     <div class="item" active="1,demo,getLocation">
@@ -134,6 +134,9 @@
     <div class="item" active="1,demo,list2detail">
         list2detail (列表到详细页)
     </div>
+    <div class="item" active="1,demo,scoll-list">
+        scoll-list (下拉刷新+滚动加载)
+    </div>
     <div class="item" active="1,demo,ota">
         OTA-plugins(扩展插件)
     </div>

diff --git a/view/demo/index/content.js b/view/demo/index/content.js
@@ -6,7 +6,7 @@ define(function(require) {
 	var $ = app.util;
 
 	//demo打开网页
-	$('#openWeb')[0].addEventListener('touchend', function(event) {
+	$('body').tap('#openWeb', function(event) {
 		app.openView({
 			param: {
 				url: 'http://m.baidu.com/',

diff --git a/view/demo/scoll-list/content.css b/view/demo/scoll-list/content.css
diff --git a/view/demo/scoll-list/content.html b/view/demo/scoll-list/content.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="format-detection" content="telephone=no">
+    <link href="../../../sdk/ui.css" rel="stylesheet">
+    <link href="content.css" rel="stylesheet">
+</head>
+
+<body class="flex-col scroll_cont">
+    <div id="view">
+        <textarea class="hide" template>
+            <!--for: ${data} as ${el}-->
+            <div class="card">
+                <div class="card-head">
+                    <div class="card-title">
+                        ${el.name}
+                        <div class="item-note">
+                        ${el.number}
+                        </div>
+                    </div>
+                </div>
+                <div class="item item-body">
+                    This is a basic Card which contains an item that has wrapping text.
+                </div>
+            </div>     
+            <!--/for-->
+        </textarea>
+    </div>
+</body>
+<script type="text/javascript">
+    var headNode = document.getElementsByTagName('head')[0];
+    var confNode = document.createElement('script');
+    var coreNode = document.createElement('script');
+    var selfPath = window.location.href;
+    var widgetPath = "widget://";
+    var pathMatch = selfPath.match(/\/view(.+)$/);
+    if(pathMatch[1]){
+    	selfPath = pathMatch[1];
+    	var index = -1;
+		var pathDeep = 0;
+		do {
+			index = selfPath.indexOf("/", index + 1);
+			if (index != -1) {
+				pathDeep++;
+			}
+		} while (index != -1);
+		if(pathDeep){
+			widgetPath  ="";
+			for(var deepStart = 0;deepStart<pathDeep;deepStart++){
+				widgetPath += "../";
+			}
+		}
+    }
+
+    confNode.type = "text/javascript";
+    confNode.src = widgetPath + "config.js";
+    coreNode.type = "text/javascript";
+
+    if (coreNode.addEventListener) {
+      coreNode.addEventListener("load", scriptOnload, false);
+    } else if (coreNode.readyState) {
+      coreNode.onreadystatechange = function() {
+        if (coreNode.readyState == "loaded" || coreNode.readyState == "complete") {
+          coreNode.onreadystatechange = null;
+          scriptOnload();
+        }
+      };
+    } else {
+      coreNode.onload = scriptOnload;
+    }
+    coreNode.src = widgetPath + "sdk/core.js";
+    coreNode.onerror = function(e){
+    	console.log(JSON.stringify(e));
+    };
+    apiready = function() {
+      headNode.appendChild(confNode);
+      headNode.appendChild(coreNode);
+    };
+    function scriptOnload(){
+      seajs.use("./content");
+    }
+  </script>
+
+</html>
diff --git a/view/demo/scoll-list/content.js b/view/demo/scoll-list/content.js
@@ -0,0 +1,63 @@
+/*
+ * layout
+ */
+define(function(require) {
+	require('sdk/common');
+	var $ = app.util;
+
+	var render = require('render');
+	var myRender = render({
+		el: '#view',
+		callback: function(){
+			app.loading.hide();
+			app.pull.stop();
+			if(!scrollLoadHandle){
+				myRender.set({
+					reload: false
+				});
+				scrollLoadHandle = scrollLoad({
+					el: $('body')[0],
+					callback: function(stopFn) {
+						pageLoadObj.load(stopFn);
+					}
+				});
+			}
+		}
+	});
+
+	var pageLoad = require('paging-load');
+	var scrollLoadHandle;
+
+	var pageLoadObj = pageLoad({
+		url: 'http://rapapi.org/mockjsdata/1201/page-data-mock/',
+		data: {},
+		success: function(res) {
+			if(res.status==='Y'){
+				myRender.data(res);
+			}
+		},
+		nomore: function() {
+			//返回数据需要有count字段，否则永远不会触发nomore回调
+			app.toast('没有更多了');
+			scrollLoadHandle && (scrollLoadHandle = scrollLoadHandle.destory());
+		}
+	});
+
+	//滚动加载
+	var scrollLoad = require('scroll-load');
+	scrollLoadHandle = scrollLoad({
+		el: $('body')[0],
+		callback: function(stopFn) {
+			pageLoadObj.load(stopFn);
+		}
+	});
+	//下拉刷新
+	app.pull.init(function(){
+		myRender.set({
+			reload: true
+		});
+		pageLoadObj.reload();
+	});
+	//初始加载
+	pageLoadObj.load();
+});
diff --git a/view/demo/scoll-list/script.js b/view/demo/scoll-list/script.js
@@ -0,0 +1,14 @@
+/*
+ * layout
+ */
+define(function(require) {
+	require('sdk/common');
+	var $ = app.util;
+
+	app.window.popoverElement({
+		id: 'view',
+		url: './content.html',
+		bounce: true
+	});
+
+});
diff --git a/view/demo/scoll-list/style.css b/view/demo/scoll-list/style.css
diff --git a/view/demo/scoll-list/temp.html b/view/demo/scoll-list/temp.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="format-detection" content="telephone=no">
+    <link href="../../../sdk/ui.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+
+</head>
+
+<body class="flex-col">
+    <div class="head">
+        <div class="btn" id="goBack">
+            <i class="ion">&#xe651;</i>
+        </div>
+        <div class="title">滚动列表示例</div>
+    </div>
+    <div class="flex-1 flex-col" id="view">
+
+    </div>
+</body>
+<script type="text/javascript">
+    var headNode = document.getElementsByTagName('head')[0];
+    var confNode = document.createElement('script');
+    var coreNode = document.createElement('script');
+    var selfPath = window.location.href;
+    var widgetPath = "widget://";
+    var pathMatch = selfPath.match(/\/view(.+)$/);
+    if(pathMatch[1]){
+    	selfPath = pathMatch[1];
+    	var index = -1;
+		var pathDeep = 0;
+		do {
+			index = selfPath.indexOf("/", index + 1);
+			if (index != -1) { 
+				pathDeep++;
+			}
+		} while (index != -1);
+		if(pathDeep){
+			widgetPath  ="";
+			for(var deepStart = 0;deepStart<pathDeep;deepStart++){
+				widgetPath += "../";
+			}
+		}
+    }
+
+    confNode.type = "text/javascript";
+    confNode.src = widgetPath + "config.js";
+    coreNode.type = "text/javascript";
+
+    if (coreNode.addEventListener) {
+      coreNode.addEventListener("load", scriptOnload, false);
+    } else if (coreNode.readyState) {
+      coreNode.onreadystatechange = function() {
+        if (coreNode.readyState == "loaded" || coreNode.readyState == "complete") {
+          coreNode.onreadystatechange = null;
+          scriptOnload();
+        }
+      };
+    } else {
+      coreNode.onload = scriptOnload;
+    }
+    coreNode.src = widgetPath + "sdk/core.js";
+    coreNode.onerror = function(e){
+    	console.log(JSON.stringify(e));
+    };
+    apiready = function() {
+      headNode.appendChild(confNode);
+      headNode.appendChild(coreNode);
+    };
+    function scriptOnload(){
+      seajs.use("./script");
+    }
+  </script>
+
+</html>