废话不多说,demo共两个页面,一个首页列表,一个详情页。
由于sui路由机制,两个页面共用一个js处理逻辑,每个页面都有一个独立的id,js里面也是使用这个id来区分页面。
下面附demo地址
1.index.html
首页从node api的接口获取的数据,开发中换成你们的请求接口就好。
首页实现的功能有上拉刷新当前页面,滚动到底部自动加载更多...跳转详情页传参
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>首页</title> <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <style> .topicDetails{ overflow-x: hidden; padding: 1rem; box-sizing: border-box; } .title2{ color: red; } </style> </head> <body> <div class="page-group"> <div id="Drop-down-refresh" class="page"> <header class="bar bar-nav"> <a class="icon icon-me pull-left open-panel"></a> <h1 class="title">首页</h1> </header> <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 --> <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="5" data-ptr-distance="55"> <!-- 默认的下拉刷新层 --> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> <!-- 下面是正文 --> <div class="card-container"> <div class="card" v-for="list in lists"> <a :href="getTopicsDetails(list.id)" class="external2"> <div class="card-header" v-text="list.title"></div> <div class="card-content"> <div class="card-content-inner" v-text="list.id"></div> </div> </a> </div> </div> <!-- 加载提示符 --> <div class="infinite-scroll-preloader"> <div class="preloader"></div> </div> </div> </div> </div> <script src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js'></script> <script src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="js.js"></script> <script> const app = new Vue({ el:"#Drop-down-refresh", data:{ url:'https://cnodejs.org/api/v1', lists:[], itemsPerLoad:10, //每次加载条数 pageIndex:1 , //请求页数 }, mounted() { this.getTopics(); }, methods: { // 获取主题列表 getTopics(){ let _this = this; if(_this.lists.length <= 0 ) $.showPreloader(); // 显示加载指示器 axios.get(_this.url + '/topics', { params: { page:_this.pageIndex, // 请求页码 tab:'good', //主题分类。目前有 ask share job good limit:_this.itemsPerLoad, //每页条数 } }) .then(function (response) { $.hidePreloader(); console.log(response); // _this.lists = response.data.data; response.data.data.forEach(list => { _this.lists.push(list) }); console.log(_this.lists); }) .catch(function (error) { console.log(error); }); }, // 获取详情跳转传参 getTopicsDetails:function(topicsId){ return 'details.html?id='+topicsId } }, }) $.init(); </script> </body> </html>
2.details.html
详情页只是接受传过来的参数,进行请求。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>详情</title> <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <style> .topicDetails{ overflow-x: hidden; padding: 1rem; box-sizing: border-box; } .title2{ color: red; } </style> </head> <body> <div class="page-group"> <div class="page" id="details"> <header class="bar bar-nav"> <a class="button button-link button-nav pull-left back"> <span class="icon icon-left"></span> 返回 </a> <h1 class="title">详情</h1> </header> <div class="content topicDetails"> <h3 class="title2" v-text="title"></h3> <div v-html="topicDetails"></div> </div> </div> </div> <script src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js'></script> <script src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="js.js"></script> <script> $.init(); </script> </body> </html>
3.共用的js,使用pageid来区分页面。在对应的id中写逻辑代码。
let loading = false; // 滚动加载 $(document).on("pageInit",function(e, pageId, $page){ if(pageId == "Drop-down-refresh"){ loading = false; }else if(pageId == "details"){ const app = new Vue({ el:"#details", data:{ url:'https://cnodejs.org/api/v1', paraId:'', // 参数id topicDetails:'', title:'', }, mounted() { this.getUrlPara(); this.getTopicsDetails(); }, methods: { getTopicsDetails(){ let _this = this; $.showPreloader(); // 显示加载指示器 // 模拟加载延迟 setTimeout(function(){ axios.get(_this.url + '/topic/' + _this.paraId) .then(function(res){ console.log(res) _this.topicDetails = res.data.data.content; _this.title = res.data.data.title; $.hidePreloader();// 隐藏加载指示器 }) .catch(function(error){ console.log(error) $.hidePreloader(); $.alert("加载失败") }) },0) }, // 获取参数id getUrlPara(){ let _this = this; let url = document.location.toString(); let arrUrl = url.split("="); _this.paraId = arrUrl[1]; console.log(_this.paraId) return _this.paraId; } }, }); } }); // 添加'refresh'监听器 下拉刷新 $(document).on("refresh",".pull-to-refresh-content",function(e){ //模拟1s的加载过程 setTimeout(function(){ // 下拉后执行刷新 location.reload(); },1000) }); // 注册'infinite'事件处理函数 滚动加载 $(document).on('infinite', '.infinite-scroll-bottom',function() { // 如果正在加载,则退出 if (loading) return; // 设置flag loading = true; // 模拟1s的加载过程 setTimeout(function() { app.pageIndex++; if(app.lists.length >= 100){ //加载完毕,则注销无限加载事件,以防不必要的加载 $.alert("没有更多了...") loading = true; $.detachInfiniteScroll($('.infinite-scroll')); // 删除加载提示符 $('.infinite-scroll-preloader').remove(); return; } app.getTopics(); console.log("加载完成") loading = false; },1000); });
附上完整demo地址:https://github.com/hs610/suiwuxiangundong.git