微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
来源:互联网 发布:淘宝有杰克琼斯么 编辑:程序博客网 时间:2024/05/17 00:52
§ 列表 - 开发准备
本文配套视频地址:
https://v.qq.com/x/page/f0554syejjd.html
开始前请把
ch3-1
分支中的code/
目录导入微信开发工具
这一章主要会教大家如何用小程序制作一个可以无限加载的列表。希望大家能通过这个例子掌握制作各种列表的原理。
无限列表加载的原理
其实所谓的无限列表就是将所有的数据分成一页一页的展示给用户看。我们每次只请求一页数据。当我们判断用户阅读完了这一页之后,立马请求下一页的数据,然后渲染出来给用户看,这样在用户看来,就感觉一直有内容可看。
当然,这其中很重要的一点就是,涉及到请求就肯定会有等待,处理好请求时的 加载状态,给用户以良好的体验也是非常重要的,否则如果网络状况不佳,而且没有给用户提示程序正在努力加载的话,用户很容易就以为他看完了,或者程序死掉了。
我们的列表所提供的功能
- 静默加载
- 标记已读
- 提供分享
涉及的核心技术和 API
- wx:for 的用法
- onReachBottom 的用法
- wx.storage 的用法
- wx.request 的用法
- Promise
- 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}
静态页面已经制作完成,下一篇中,我们将带着大家开发业务流程
iKcamp官网:http://www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
iKcamp最新活动
报名地址:http://www.huodongxing.com/event/5409924174200
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- 微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇
- 微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染
- 微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善
- 微信小程序教学第二章:小程序中级实战教程之预备篇
- 微信小程序教学视频
- iKcamp出品微信小程序教学共5章16小节汇总(含视频)
- 微信小程序实战篇-分类页面制作
- 微信小程序实战篇-分类页面制作
- 微信小程序实战篇-分类页面制作
- 微信小程序免费教学视频
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- iKcamp团队制作|基于Koa2搭建Node.js实战项目教学(含视频)☞ 环境准备
- 学术资源汇总
- springBoot中Logback日志的使用
- Thinkphp 如何解决表单重复提交问题
- Zabbix中文字体替换
- eclipse 安装 lombok 消除警告
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
- 输入一个链表,从尾到头打印链表每个节点的值。
- Eclipse启动报错问题
- JAVA-Socket-TcpDemo-Eclipse Jee Oxygen
- bzoj 1861 [Zjoi2006]Book 书架
- css的三大样式
- AngularJS ng-style 指令
- C#如何调用Python执行脚本,并将执行结果显示值显示至C#界面
- Spring xml 配置文件