效果图如下:只需要一个标题以及类型和时间
这里的难点就是布局的样式表,对于没有过Web前端
开发经验的笔者,只能一步一步摸着石头过河了,还有一点是接口返回的时间格式需要我们去格式化,笔者这里只是简单的截取,并没有进行时间的转化。
reading.wxml
布局如下
<view>
<block wx:for="{{ganks}}" wx:for-item="item" wx:for-index="idx">
<view class='container' catchtap="onGankTap" data-postUrl="{{item.url}}">
<text class='desc-container' data-postDesc="{{item.desc}}">{{item.desc}}</text>
<view class='type-date-container'>
<view class='type-container'>
<text class='type'>{{item._type}}</text>
</view>
<view class='date-container'>
<text class='date'>{{item.publishedAt}}</text>
</view>
</view>
</view>
</block>
</view>
该布局可以拆分为:标题+标签、时间 两部分。因为是列表,所以我们只要写一份该布局然后用for
循环即可实现整体列表。
for
语句的使用可以参考 官方文档—框架—视图层—WXS—语句
wx:for="{{ganks}}" wx:for-item="item" wx:for-index="idx"
其中wx:for="{{ganks}}
使用了数据绑定的方式,这里的意思是循环遍历ganks
这个集合中的数据,记得数据绑定是要用{{}}
将数据括起来哦~。
wx:for-item="item"
表示每一个item
的数据对象,通过item
这个对象可以取出该对象中的其他属性。
wx:for-index="idx"
其中idx
是自己定义的表示每个item
对于的序号,从0
开始哦。
reading.wxss
样式表代码如下
.container {
display: flex;
width: 100%;
height: auto;
flex-direction: column;
background-color: yellowgreen;
border-top: 1px solid #ededed;
padding: 40rpx 16rpx 40rpx 16rpx;
}
.desc-container {
width: 100%;
display: flex;
flex-direction: row;
letter-spacing: 3rpx;
text-align: left;
color: #fff;
padding-bottom: 5px;
}
.type-date-container {
width: 100%;
height: 40rpx;
display: flex;
flex-direction: row;
margin-left: 16rpx;
margin-right: 16rpx;
margin-top: 20rpx;
}
.type-container {
display: flex;
flex-direction: row;
border: 1px solid #fff;
width: 200rpx;
height: 40rpx;
border-radius: 5px;
text-align: center;
color: #fff;
}
.type {
display: flex;
flex-direction: row;
font-size: 24rpx;
font-weight: bold;
color: #fff;
text-align: justify;
padding: 2rpx 20rpx 0rpx 50rpx;
}
.date-container {
display: flex;
flex-direction: row;
float: right;
position: absolute;
right: 0;
margin-right: 16rpx;
}
.date {
font-size: 24rpx;
font-weight: bold;
line-height: 40rpx;
color: #fff;
margin-right: 16rpx;
}
reading.wxss
和之前写的样式表,多了几个不认识的属性,下面就来简单介绍一下,需要更深入学习可以参考 CSS3 教程 或者是 菜鸟教程
.container item
内容布局的样式分析:
width:100%
表示宽度占满屏幕
height: auto
表示高度适应内容的高度
flex-direction: column;
表示每个item
中的内容是垂直排布,因为顶上一层是标题,下面一层是类型和时间
background-color: yellowgreen;
每个item
布局的背景色是黄绿色
border-top: 1px solid #ededed;
每个item
布局的边框为1px
宽度的线solid
表示实体填充,最后一个是填充的颜色 。
padding: 40rpx 16rpx 40rpx 16rpx;
表示内边距,从左到右的顺序分别是上,右,下,左
。
.desc-container
标题样式主要属性分析:
letter-spacing: 3rpx;
表示字体的间距是3rpx
text-align: left;
表示内容的文本是左对齐
.type-container
分类主布局的样式主要属性分析:
border-radius: 5px;
表示分类的边框圆角是5px
.type
分类文本样式主要属性分析:
font-weight: bold;
表示字体加粗
text-align: justify;
表示分类的文本设置为两端对齐
.date-container
时间样式主要属性分析:
float: right;
表示在右边对齐
position: absolute;
表示绝对定位
right: 0;
在使用了绝对定位后,使用这个属性可以将view
放置在距离右边0px
的位置
reading.js
业务逻辑处理
Page({
/**
* 页面的初始数据
*/
data: {
ganks: {},
requestUrl:'',
pageSize:10,
page:1,
isEmpty: true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var baseUrl = "http://gank.io/api/data/all/" ;
var url = baseUrl + this.data.pageSize + "/" + this.data.page;
this.data.requestUrl = baseUrl ;
// console.log("url--->"+url);
this.getGankData(url);
wx.setNavigationBarTitle({
title: '全部干货'
})
},
getGankData: function (url) {
var that = this;
wx.request({
url: url,
method: 'GET',
header: {
"Content-Type": "json"
},
success: function (res) {
that.processGankData(res.data.results);
},
fail: function (error) {
console.log('错误信息是:' + error);
}
})
},
/**
* 处理干货数据
*/
processGankData: function (gankData) {
var ganks = [];
for (var idx in gankData) {
var subject = gankData[idx];
var time = subject.publishedAt;
var time1 = time.replace('T',' ')
var date = time1.substring(0,19);
var temp = {
desc: subject.desc,
publishedAt: date,
_type: subject.type,
_id: subject._id,
url: subject.url
}
ganks.push(temp)
}
var totalGanks = {}
//如果要绑定新加载的数据,那么需要同旧有的数据合并在一起
if (!this.data.isEmpty) {
totalGanks = this.data.ganks.concat(ganks);
}
else {
totalGanks = ganks;
this.data.isEmpty = false;
}
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh()
this.setData({
ganks: totalGanks
});
},
/**
* 下拉刷新
*/
onPullDownRefresh: function (event) {
// 第一页
this.data.page = 1;
var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
this.data.ganks = {};
this.data.isEmpty = true;
wx.showNavigationBarLoading();
this.getGankData(url);
},
/**
* 上拉加载更多
*/
onReachBottom: function (event) {
this.data.page = this.data.page + 1 ;
var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
this.getGankData(url);
},
/**
* item 的点击事件
*/
onGankTap:function(event){
var detailUrl = event.currentTarget.dataset.posturl;
var detailDesc = event.currentTarget.dataset.postdesc;
wx.navigateTo({
url: "reading-detail/reading-detail?url=" + detailUrl + "title=" + detailDesc
})
},
})
reading.js
主要处理了网络数据的加载,下拉刷新操作,上拉加载操作,以及item
的点击事件,在页面onLoad
时还对标题栏进行设置。
- 下拉刷新
1. 先在 reading.json 中设置
{
"enablePullDownRefresh": true
}
2. 再在 reading.js 中实现以下方法即可实现下拉刷新
/**
* 下拉刷新
*/
onPullDownRefresh: function (event) {
// 第一页
this.data.page = 1;
var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
this.data.ganks = {};
this.data.isEmpty = true;
wx.showNavigationBarLoading();
this.getGankData(url);
},
3. 在处理下拉返回的数据时,需要做一些判断,如果是下拉下的数据需要同旧的数据合并。
4. 最后关闭下拉刷新 wx.stopPullDownRefresh()
- 上拉加载
/**
* 上拉加载更多
*/
onReachBottom: function (event) {
this.data.page = this.data.page + 1 ;
var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
this.getGankData(url);
},
实现onReachBottom
方法即可,之后的操作和下拉刷新一样,所不同的就是二者的url
不一样,上拉加载的page
是递增的,而下拉刷新一直请求的是第一页的数据
Item
点击跳转页面
/**
* item 的点击事件
*/
onGankTap:function(event){
var detailUrl = event.currentTarget.dataset.posturl;
var detailDesc = event.currentTarget.dataset.postdesc;
wx.navigateTo({
url: "reading-detail/reading-detail?url=" + detailUrl + "title=" + detailDesc
})
},
由于在reading.wxml
中设置了catchtap="onGankTap"
事件,所以实现该方法即可,这里使用到了页面跳转的API
title
设定
在onLoad
方法中设置
wx.setNavigationBarTitle({
title: '全部干货'
})
即可实现添加标题的另一种方式。还有另一种方式是在.json
中配置