§列表-开发准备本文配套视频地址：https://v.qq.com/x/page/f0554...开始前，请将ch3-1分支的code/目录导入微信开发工具。本章将主要教大家如何用一个小程序制作一个可以无限加载的列表。希望大家能通过这个例子掌握制作各种列表的原理。无限列表加载原理其实所谓无限列表就是把所有的数据分页给用户看。我们一次只请求一页数据。当我们判断用户已经阅读完这一页后，我们马上去请求下一页的数据，然后渲染给用户看，让用户觉得一直有内容可以看。当然，其中最重要的一点就是在请求的时候肯定会有等待。处理请求的加载状态，给用户良好的体验也很重要。否则，如果网络条件不好，没有提示用户程序正在加载，用户很容易认为自己已经看完了，或者程序挂了。我们列表提供的功能静默加载标记阅读提供分享涉及的核心技术和APIapp.json文件，修改如下：修改pages字段，为小程序添加页面配置，修改window字段，调整小程序的header样式，即navigationBar{"pages":["pages/index/index","pages/detail/detail"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#4abb3b","navigationBarTitleText":"iKcampEnglishlearning","backgroundColor":"#f8f8f8","navigationBarTextStyle":"white"},"netWorkTimeout":{"request":10000,"connectSocket":10000,"uploadFile":10000,"downloadFile":10000},"debug":true}现在准备工作一切就绪，我们开始列表页面制作过程。大家可以预览一下我们最终的制作效果图：分析下一页，很明显日期是一个页面结构单元，一个单元中的每篇文章也是一个小单元。制作我们的页面如下，过程很简单，不再赘述，修改index.wxml文件：今天为什么聪明人总是保持冷静？6月27日为什么聪明人总能保持冷静？暂时没有更多内容修改index.wxss文件：.wrapper.group{padding:036rpx10rpx36rpx;background:#fff;margin-bottom:16rpx}.wrapper.group-bar{height:114rpx;text-align:center}.wrapper.group-title{position:relative;display:inline-block;padding:012rpx;height:40rpx;line-height:40rpx;border-radius:4rpx;border:solid1rpx#e0e0e2;字体-尺寸：28rpx；颜色：#ccc；边距顶部：38rpx；溢出：可见}.wrapper.group-title:after,.wrapper.group-title:before{content:'';top:18rpx;position:absolute；宽度：32rpx；高度：1rpx；变换：scaleY(.5)；边框底部:solid1px#efefef}.wrapper.group-title:before{left:-56rpx}.wrapper.group-title:after{right:-56rpx}.wrapper.group-title.on{border:solid1rpx#ffc60e;颜色：#ffc60e}.wrapper.group-title.on:after,.wrapper.group-title.on:before{border-bottom:solid1px#ffc60e}.wrapper.group-content-item{position:relative;宽度：100%；高度：194rpx；margin-bottom:28rpx}.wrapper.group-content-item-desc{字体大小：36rpx;字体粗细：500；高度：156rpx；:300rpx;保证金顶部：8rpx；溢出：隐藏；颜色：#333}.wrapper.group-content-item-img{位置：绝对；右：0；顶部：0；垂直对齐：顶部；宽度：260rpx；高度：194rpx}.wrapper.group-content-item.visited.group-content-item-desc{颜色：#999}.wrapper.no-more{高度：44rpx;行高：44rpx；字体大小：32rpx；颜色：#ccc；文本对齐：居中；padding:20rpx0}静态页面已经制作完成，下篇文章带大家开发业务流程iKcamp官网：http://www.ikc访问amp.com官网，更快阅读所有免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》包括：文章、视频、源码iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当网发售。iKcamp最新活动报名地址：http://www.huodongxing.com/ev...与“天天练英语口语”mini总榜第四的研发团队面对面交流-程序，在教育类别中排名第一。
