微信小程序教学第三章（含视频）：小程序中级实战教程：列表-静态页面制作

shaonbean 发布于2019-08-01 17:51 / 1856人阅读

摘要：列表开发准备本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章主要会教大家如何用小程序制作一个可以无限加载的列表。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。

§ 列表 - 开发准备

本文配套视频地址：
https://v.qq.com/x/page/f0554...

开始前请把 ch3-1 分支中的 code/ 目录导入微信开发工具
这一章主要会教大家如何用小程序制作一个可以无限加载的列表。希望大家能通过这个例子掌握制作各种列表的原理。

无限列表加载的原理

其实所谓的无限列表就是将所有的数据分成一页一页的展示给用户看。我们每次只请求一页数据。当我们判断用户阅读完了这一页之后，立马请求下一页的数据，然后渲染出来给用户看，这样在用户看来，就感觉一直有内容可看。

当然，这其中很重要的一点就是，涉及到请求就肯定会有等待，处理好请求时的 加载状态，给用户以良好的体验也是非常重要的，否则如果网络状况不佳，而且没有给用户提示程序正在努力加载的话，用户很容易就以为他看完了，或者程序死掉了。

我们的列表所提供的功能

静默加载

标记已读

提供分享

涉及的核心技术和 API

wx:for 的用法

onReachBottom 的用法

wx.storage 的用法

wx.request 的用法

Promise

onShareAppMessage 的用法

我们将正式投入开发中，在这之前，我们修改 app.json 文件，并修改如下：

修改 pages 字段，为小程序增加页面配置

修改 window 字段，调整小程序的头部样式，也就是 navigationBar

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#4abb3b",
    "navigationBarTitleText": "iKcamp英语学习",
    "backgroundColor": "#f8f8f8",
    "navigationBarTextStyle":"white"
  },
  "netWorkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

现在准备工作已经全部到位，我们开始列表页面的制作过程。

可以预览下我们的最终制作效果图：

分析下页面，很明显，日期是一个页面结构单位，一个单位里面的每篇文章也是一个小的单位。制作我们的页面如下，过程很简单，就不再复述了，修改 index.wxml 文件：


    
        
            今日
        
        
            
                为什么聪明人总能保持冷静？
                
            
        
    
    
        
            06月27日
        
        
            
                为什么聪明人总能保持冷静？
                
            
        
    
    暂时没有更多内容

修改 index.wxss 文件：

.wrapper .group {
  padding: 0 36rpx 10rpx 36rpx;
  background: #fff;
  margin-bottom: 16rpx
}

.wrapper .group-bar {
  height: 114rpx;
  text-align: center
}

.wrapper .group-title {
  position: relative;
  display: inline-block;
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 4rpx;
  border: solid 1rpx #e0e0e2;
  font-size: 28rpx;
  color: #ccc;
  margin-top: 38rpx;
  overflow: visible
}

.wrapper .group-title:after,.wrapper .group-title:before {
  content: "";
  top: 18rpx;
  position: absolute;
  width: 32rpx;
  height: 1rpx;
  transform: scaleY(.5);
  border-bottom: solid 1px #efefef
}

.wrapper .group-title:before {
  left: -56rpx
}

.wrapper .group-title:after {
  right: -56rpx
}

.wrapper .group-title.on {
  border: solid 1rpx #ffc60e;
  color: #ffc60e
}

.wrapper .group-title.on:after,.wrapper .group-title.on:before {
  border-bottom: solid 1px #ffc60e
}

.wrapper .group-content-item {
  position: relative;
  width: 100%;
  height: 194rpx;
  margin-bottom: 28rpx
}

.wrapper .group-content-item-desc {
  font-size: 36rpx;
  font-weight: 500;
  height: 156rpx;
  line-height: 52rpx;
  margin-right: 300rpx;
  margin-top: 8rpx;
  overflow: hidden;
  color: #333
}

.wrapper .group-content-item-img {
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: top;
  width: 260rpx;
  height: 194rpx
}

.wrapper .group-content-item.visited .group-content-item-desc {
  color: #999
}

.wrapper .no-more {
  height: 44rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #ccc;
  text-align: center;
  padding: 20rpx 0
}

静态页面已经制作完成，下一篇中，我们将带着大家开发业务流程

iKcamp官网：http://www.ikcamp.com

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp最新活动

报名地址：http://www.huodongxing.com/ev...

与“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。

GPU云服务器云服务器不用编程制作微信小程序视频 vps制作微信小程序工具类微信小程序怎么制作微信小程序实时音视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51418.html

微信小程序教学第三章（含视频）：小程序中级实战教程：列表-静态页面制作

摘要：列表开发准备本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章主要会教大家如何用小程序制作一个可以无限加载的列表。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。 § 列表 - 开发准备本文配套视频地址：https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...

CHENGKANG 2019-08-30 13:49 评论0 收藏0
微信小程序教学第三章（含视频）：小程序中级实战教程：列表-静态页面制作

摘要：列表开发准备本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章主要会教大家如何用小程序制作一个可以无限加载的列表。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。 § 列表 - 开发准备本文配套视频地址：https://v.qq.com/x/page/f0554... showImg(https://segmentfault.com/img/bVXd4...

宋华 2019-08-21 17:13 评论0 收藏0
iKcamp出品微信小程序教学共5章16小节汇总(含视频)

摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。从现在开始，我假装你已经掌握了 html、 css以及 ES6...

elliott_hu 2019-08-21 17:28 评论0 收藏0
iKcamp出品微信小程序教学共5章16小节汇总(含视频)

摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。从现在开始，我假装你已经掌握了 html、 css以及 ES6...

paney129 2019-08-01 17:56 评论0 收藏0
iKcamp出品微信小程序教学共5章16小节汇总(含视频)

摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。从现在开始，我假装你已经掌握了 html、 css以及 ES6...

lmxdawn 2019-08-29 13:45 评论0 收藏0