澳门新浦京娱乐游戏创造世界上最简单的 PHP 开发模式(2)

澳门新浦京娱乐游戏 3

七:文章列表察看页面实现和模板处理

随着web
app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS
Queue
LazyLoad中会实现各个JS文件顺序加载,每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。

澳门新浦京娱乐游戏,滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意。我们先看看效果图:

先来看看页面list1的实现,在list1里面分页用了一个page.js文件,这个文件是自己给自己写的一个js分页的函数,挺好用的

 

澳门新浦京娱乐游戏 1功能效果图

---------------page.js---------------//--------共 20 条记录,当前 86/99 页 [1]... [82] [83] [84] [85] [86] [87] [88] [89] [90] ...[99] GO-------------------//recordCount = 20;//show = 20//pageShow = 11;//pageCount = 100;//pageNow = 86;//pageStr = ?page=_page_;//document.write(showListPage(recordCount, show, pageCount, pageNow, pageStr));function showListPage(recordCount, show, pageShow, pageCount, pageNow, pageStr){ if(pageCount1) pageCount =0; if(pageNow1) pageNow = 0; str = 共 B+recordCount+/B 条记录,当前 B+pageNow+/+pageCount+/B 页 ;if(pageCount=pageShow){ startHave = false; endHave = false; startNum = 1; endNum = pageCount; } else if(pageNow-1 = pageShow/2){ startHave = false; endHave = true; startNum = 1; endNum = pageShow-1; } else if(pageCount-pageNow = pageShow/2){ startHave = true; endHave = false; startNum = pageCount - pageShow + 2; endNum = pageCount; } else { startHave = true; endHave = true; startNum = pageNow - Math.floor((pageShow-2)/2); endNum = startNum + pageShow - 3; }if(startHave){ startStr =  [A href=+pageStr.replace(_page_,1)+1/A]... ; str += startStr; }for(i=startNum; i=endNum; i++){ if(pageNow==i) str += [ + i + ]; else str +=  [A href= + pageStr.replace(_page_,i) +  + i + /A] ; }if(endHave){ endStr =  ...[A href= + pageStr.replace(_page_,pageCount) +  + pageCount + /A] ; str += endStr; } return str;}

--------------list1.htm----------------a href=new.php添加新文章/ahrtabletrthphp开发文章/th/tr!-- BEGIN phplist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END phplist --/table!-- BEGIN phplist_page --script src=page.js language=javascript/scriptscript language=javascriptrecordCount = {recordCount}; //总记录数show = {pageSize}; //每页显示的记录数量pageShow = 10; //每页显示的分页连接数量pageCount = {pageCount}; //总页数pageNow = {page}; //当前页数pageStr = ?page=_page_; //页面连接document.write(showListPage(recordCount, show, pageShow, pageCount, pageNow, pageStr));/script!-- END phplist_page --hrtable ID=Table1trthphp开发热点文章/th/tr!-- BEGIN phphotlist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END phphotlist --/tablehrtable ID=Table2trthasp开发最新文章/th/tr!-- BEGIN aspnewlist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END aspnewlist --/table

--------------list1.php----------------?phprequire_once config.inc.php;dbConnect();$data = array();$data[phplist] = getArticleList(1, id DESC, (int)$_GET[page], 5);$data[phphotlist] = getArticleList(1, clicks DESC, id DESC, 1, 3);$data[aspnewlist] = getArticleList(2, id DESC, 1, 3);dbDisconnect();renderTpl(list1.htm, $data);?

先给出使用接口

创建目录

首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建。如图所示:

澳门新浦京娱乐游戏 2项目目录

本文示例代码或素材下载

view sourceprint?1 LazyLoad.js( 

创建lists.js文件

以下是lists.js代码

var app = getApp()Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loadHidden: true, moreHidden: 'none', msg: '没有更多文章了' }, loadData: function  { //显示出加载中的提示 this.setData({ loadHidden: false }) var limit = 10 var that = this wx.request({ url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist', //数据接口 data: { lastid: lastid, limit: limit }, header: { 'Content-Type': 'application/json' }, success: function  { if (!res.data) { that.setData({ toastHidden: false }) that.setData({ moreHidden: 'none' }) return false } var len = res.data.length var oldLastid = lastid if { that.setData({ lastid: res.data[len - 1].id }) } else { that.setData({ toastHidden: false}) } var dataArr = that.data.newsList var newData = dataArr.concat; if (oldLastid == 0) { wx.setStorageSync('CmsList', newData) } that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) }, fail: function  { if (lastid == 0) { var newData = wx.getStorageSync('CmsList') if { that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) var len = newData.length if  { that.setData({ lastid: newData[len - 1].id }) } else { that.setData({ toastHidden: false }) } console.log('data from cache'); } } else { that.setData({ toastHidden: false, moreHidden: 'none', msg: '当前网格异常,请稍后再试' }) } }, complete: function () { //显示出加载中的提示 that.setData({ loadHidden: true }) } }) }, loadMore: function  { var id = event.currentTarget.dataset.lastid var isfrist = event.currentTarget.dataset.isfrist var that = this wx.getNetworkType({ success: function  { var networkType = res.networkType // 返回网络类型2g,3g,4g,wifi if (networkType != 'wifi' && isfrist == '1') { that.setData({ confirmHidden: false }) } } }) this.setData({ isfrist: 0 }) this.loadData; }, onLoad: function () { var that = this this.loadData; }, toastChange: function () { this.setData({ toastHidden: true }) }, modalChange: function () { this.setData({ confirmHidden: true }) }})

2     urls  // js文件路径 

创建页面文件(lists.wxml)

<view > <!-- 文章列表模板 begin --> <template name="items"> <navigator url="../../pages/detail/detail?id={{id}}" hover-> <view > <image src="{{image}}" background-size="cover" model="scaleToFill"></image> </view> <view > <view >{{name}}</view> <view >{{createtime}}</view> </view> </navigator> </template> <!-- 文章列表模板 end --> <!-- 循环输出列表 begin --> <view wx:for="{{newsList}}" > <template is="items" data="{{...item}}" /> </view> <!-- 循环输出列表 end --><loading hidden="{{loadHidden}}" bindchange="loadChange"> 数据加载中...</loading> <view bindtap="loadMore" data-last data-isfrist="{{isfrist}}" style="display:{{moreHidden}}">加载更多</view> <toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast> <modal title="温馨提示" no-cancel confirm-text="明确" cancel-text="关闭" hidden="{{confirmHidden}}" bindconfirm="modalChange" bindcancel="modalChange">你当前不在在WIFI网格下下,会产生流量费用</modal></view>

3     fn    // 全部加载后回调函数 

创建页面样式(lists.wxss)

.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}navigator {overflow: hidden;}.list {margin-bottom:20rpx;height:200rpx;position:relative;}.imgs{float:left;}.imgs image {display:block;width:200rpx;height:200rpx;}.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}.title {font-size:20px; font-family: Microsoft Yahei}.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}.loadMore {text-align: center; margin:30px;color:#aaa;font-size:16px;}

通过以上代码就能实现在屏幕上滑动显示数据的功能。为了更好的服务大家,请加入我们的技术交流群:(511387930),同时您也可以扫描下方的二维码关注我们的公众号,每天我们都会分享经验,谢谢大家。

澳门新浦京娱乐游戏 3

4     scope // 指定回调函数执行上下文 

5 );

 

示例

view sourceprint?1 LazyLoad.js([a.js,b.js,c.js], function(){ 

2     alert(加载完毕); 

3 });

 

这个系统会尽全力去加载所有的JS文件,即当某个文件不存在或加载失败它不会就此中断,仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。

 

完整代码

view sourceprint?01 LazyLoad = function(win){    

02     var list, 

03         isIE =
/*@[email protected]*/!1, 

04         doc = win.document, 

05         head = doc.getElementsByTagName(head)[0]; 

06   

07     function createEl(type, attrs){ 

08         var el = doc.createElement(type), 

09             attr; 

10         for(attr in attrs){ 

11             el.setAttribute(attr, attrs[attr]); 

12         } 

13         return el; 

14     } 

15     function finish(obj){ 

16         list.shift(); 

17         if(!list.length){ 

18             obj.fn.call(obj.scope); 

19         } 

20     } 

21     function js(urls, fn, scope){ 

22         list = [].concat(urls); 

23         var obj = {scope:scope||win, fn:fn}; 

24         for(var i=0,len=urls.length; i<len; i++){ 

25             var script = createEl(script, {src: urls[i]}); 

26             if(isIE){ 

27                 script.onreadystatechange = function(){ 

28                     var readyState = this.readyState; 

29                     if (readyState == loaded || readyState ==
complete){ 

30                         this.onreadystatechange = null; 

31                         finish(obj); 

32                     } 

33                 } 

34             }else{ 

35                 script.onload = script.onerror = function(){ 

36                     finish(obj); 

37                 } 

38             } 

39             head.appendChild(script); 

40         } 

41     } 

42     return {js:js}; 

43 }(this);

 

app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的…

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图