微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作...
§ 列表 - 开发准备
本文配套视频地址:
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
文件:
<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
}
静态页面已经制作完成,下一篇中,我们将带着大家开发业务流程
iKcamp官网:http://www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
iKcamp最新活动
报名地址:http://www.huodongxing.com/ev...
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作...相关推荐
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 提取util公用方法 |基于最新版1.0开发者工具
iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据...
§ 封装网络请求及 mock 数据 本文配套视频地址: v.qq.com/x/page/i055- 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.j ...
- 第三章 Python Kivy 学习 -- Kivy官方入门教程Pong Game
系列文章目录 第一章 Python Kivy 学习 – Kivy介绍及环境安装 第二章 Python Kivy 学习 – Kivy项目开发原理(待编辑) 第三章 Python Kivy 学习 – Ki ...
- 算法小论——第三章 又把新桃换旧符
2019独角兽企业重金招聘Python工程师标准>>> 笔记 这一章主要是渐进记号和高中数学的回忆. 几个标记: Θ -- 上界和下界,绑定值,相当于f(n) ∈ [c1 * g(n ...
- 大学物理第三章笔记——高等农林院校基础课程教程系列
第三章 热物理学 文章目录 第三章 热物理学 第一节 热力学第一定律 (一)热力学系统与外界 (二)状态参量与平衡态 (三)准静态过程与非准静态过程 (四)热力学第一定律 第二节 热力学第一定律的应用 ...
- 【免费开放源码】审批类小程序项目实战(预约历史页面)
第一节:什么构成了微信小程序.创建一个自己的小程序 第二节:微信开发者工具使用教程 第三节:深入了解并掌握小程序核心组件 第四节:初始化云函数和数据库 第五节:云数据库的增删改查 第六节:项目大纲以及 ...
- 【免费开放源码】审批类小程序项目实战(我的页面)
第一节:什么构成了微信小程序.创建一个自己的小程序 第二节:微信开发者工具使用教程 第三节:深入了解并掌握小程序核心组件 第四节:初始化云函数和数据库 第五节:云数据库的增删改查 第六节:项目大纲以及 ...
- 【免费开放源码】审批类小程序项目实战(活动申请页面)
第一节:什么构成了微信小程序.创建一个自己的小程序 第二节:微信开发者工具使用教程 第三节:深入了解并掌握小程序核心组件 第四节:初始化云函数和数据库 第五节:云数据库的增删改查 第六节:项目大纲以及 ...
- 【免费开放源码】审批类小程序项目实战(活动历史页面)
第一节:什么构成了微信小程序.创建一个自己的小程序 第二节:微信开发者工具使用教程 第三节:深入了解并掌握小程序核心组件 第四节:初始化云函数和数据库 第五节:云数据库的增删改查 第六节:项目大纲以及 ...
最新文章
- BCB key事件中判断Shift、Alt、Ctrl状态
- 七十、SpringBoot整合 Druid数据源
- .NET6下周发布真的香,可不少人却只会.NET Framework!
- mysql innodb 索引 延迟更新_Mysql覆盖索引与延迟关联
- 利用python求解度中心性
- CSS两栏布局之左栏布局
- MobaXterm中修改服务器ip,如何使用mobaxterm登录云服务器
- 树堆(Treap)图文详解与实现
- 【文文殿下】APIO2019游记
- Mac Book Pro中idea常用快捷键
- 宿舍管理系统(简单版)
- python调用java之Jpype异常机制
- 旋律生成算法的现状与挑战
- excel如何冻结首行或首列及首行首列同时冻结
- iPhone铃声制作软件iRingg for Mac
- 大学计算机编程学哪些科目,大学计算机课程学习路线应该是怎么样的呢?
- 一个复杂页面该如何布局设计
- 四旋翼飞行器2——自己设计四旋翼飞行器的硬件准备和基础知识
- Python判断股票是交易日,爬虫抓取深交所交易日历
- 辅助类GenericOptionsParser,Tool和ToolRunner
热门文章
- Atitit.每周末总结 于每周一计划日程表 流程表 v8 Ver history V8 add stock chk -------------import Stock chk.. 上周遗漏日
- Atitit. 提升可读性推荐标准规范解决方案 关于编程语言的v5 docx
- atitit opencv apiattilax总结 约500个函数 .xlsx
- paip.c++ tree parse tpath解析器
- 让华泰浮盈10亿美金的AssetMark-统包资产管理平台价值几何?
- (转)卫星已经out了,为了获取信息优势对冲基金盯上了“暗网”
- Julia: 趣!,13579分别在一本168页书的页码中出现的次数
- OAM 与 KubeVela 项目整体捐赠进入 CNCF,让云端应用交付更加简单
- 跑赢业务的同时如何实现技术成长? | 凌云时刻
- 喜报!木兰宽松许可证通过OSI认证,成为首个中英双语国际开源许可证!