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

§ 列表 - 开发准备

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

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

无限列表加载的原理

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

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

我们的列表所提供的功能

  1. 静默加载
  2. 标记已读
  3. 提供分享

涉及的核心技术和 API

  1. wx:for 的用法
  2. onReachBottom 的用法
  3. wx.storage 的用法
  4. wx.request 的用法
  5. Promise
  6. onShareAppMessage 的用法

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

  1. 修改 pages 字段,为小程序增加页面配置
  2. 修改 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 文件:

<view class="wrapper">
    <view class="group">
        <view class="group-bar">
            <view class="group-title on">今日</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">为什么聪明人总能保持冷静?</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="group">
        <view class="group-bar">
            <view class="group-title">06月27日</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">为什么聪明人总能保持冷静?</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="no-more" hidden="">暂时没有更多内容</view>
</view>    

修改 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
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

用程序帮你炒股

最近在知乎上看到一个问题:如何使用 Python 抓取雪球网页? 雪球是国内一个人气很高的股票财经类网站,上面有个投资组合功能,很多民间股神在上面设定自己的投资...

2917
来自专栏架构师之路

Google-优秀移动站点设计10招

Google-优秀移动网站设计10招 1)添加一个醒目的搜索条:在移动终端上,人们希望能够快速找到自己需要的东西 2)把大表格拆分成小块:别搞一个长长的表格页面...

2673
来自专栏杨建荣的学习笔记

DBA和开发同事的一些代沟(五) (r7笔记第92天)

陆陆续续写了四篇和开发同事的代沟,从最开始的吐槽到后面的例行总结,整个过程也是总结经验,看似很小的问题对于DBA来说就是莫大的改进,或者在开发严重越不过去的坎儿...

35010
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

2620
来自专栏郭霖

Android通知栏微技巧,那些你所没关注过的小细节

本篇文章首发于我的微信公众号,其实通常情况下我都不会将微信文章再在博客上发表的,因为我认为两者区别比较大。微信文章偏向于短小精炼,毕竟要在手机上阅读,博客文章则...

2698
来自专栏Java3y

移动商城第一篇【搭建项目环境+数据模型】

前言 本次该项目使用的技术如下: ? 这里写图片描述 搭建Oracle数据库环境 本次我们用Oracle作为我们的服务器,我们一般开发并不是把数据表放在我们练习...

3909
来自专栏kevin-blog

下拉式终端Tilda

无意中发现一款非常好用的下拉式终端,很多人肯定会问,下拉式终端?什么叫下拉式终端?和linux自带的终端有什么区别呢?所以请带着答案看下面的内容

601
来自专栏CSDN技术头条

皮一下,给自己做个打卡系统

2018 年微信小程序开发者逐渐多了起来,微信平台也推出了很多红利,鼓励开发者参与到小程序开发中。

914
来自专栏苦逼的码农

给大家介绍一些自己常用、感觉很不错的效率工具

上次给大家推荐了一些谷歌浏览器的插件,好像有些大家还挺喜欢的,有人喜欢,我也挺开心.....

713
来自专栏H2Cloud

游戏服务器设计之任务系统

游戏服务器设计之任务系统 介绍 任务系统是游戏中最重要的系统之一,本文旨在设计一个轻量清晰的任务系统。通用易扩展是本系统关注的重点。任务系统中当角色的条件满足时...

4204

扫码关注云+社区