课堂学习：处理时间数据 上拉下拉页面
一、处理时间戳
1.在后台处理
//加载课程对应的题目信息的方法
async loadSubjects(id){
let data = await wx.$get('Subject/GetSubjects',{section_id:id})
// 在后台对数据里面的时间戳进行处理
/* data = data.map(r=>{
return {
Title:r.Title,
Section:r.Section,
Createtime:wx.$formatTime(new Date(parseInt(r.Createtime)))
}
}) */
this.setData({
subjects:data
})
}
2.导入wxs文件 在模板中，对时间数据进行处理
新建一个wxs文件 把要用到的函数放到文件中并导出 这是格式化日期的方法
//格式化日期的方法
var formatTime = function(date) {
date = getDate(parseInt(date));
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
//补零的方法
var formatNumber = function(n) {
n = n.toString()
return n[1] ? n : '0'+n
}
module.exports = {
formatTime:formatTime
}
在wxml文件中导入wxs文件
<!-- 导入wxs文件 -->
<wxs module="tools" src="../../wxs/filter.wxs"></wxs>
<view class="order">
<navigator url="../detail/detail?id={{item.Id}}" class="item" wx:for="{{subjects}}" wx:key="index">
<view class="title">{{item.Title}}</view>
<view class="section">
<view>{{item.Section.Name}}</view>
<!-- 在模板中，对时间数据进行处理 -->
<view>{{tools.formatTime(item.Createtime)}}</view>
</view>
</navigator>
</view>
二、上拉加载更多 上拉触底函数
// 生命周期函数--上拉触底函数
onReachBottom:function(){
//触底后，页码加1
this.data.pageIndex++
this.loadSubjects()
},
//加载课程对应的题目信息的方法
async loadSubjects(){
let data = await wx.$get('Subject/GetSubjects',{
pageIndex:this.data.pageIndex,
pageSize:this.data.pageSize
})
//如果获取不到数据
if(data.length===0){
wx.$msg('没有更多')
return
}
//将最新后的信息，追加到数组的后面
this.data.subjects.push(...data)
this.setData({
//重新渲染页面
subjects:this.data.subjects
})
}
三、生命周期函数--下拉刷新函数
// 生命周期函数--下拉刷新函数
onPullDownRefresh:function(){
//将页码重新恢复成1
this.data.pageIndex = 1
//数组里面的数据清空
this.data.subjects = []
//调用加载数据的方法
this.loadSubjects()
//1秒后，停止下拉刷新动作
setTimeout(() => {
wx.stopPullDownRefresh()
}, 1000);
},
四、制作详情页面 （从题目页面跳转 加载完整题目信息）
1.wxml
<!-- 导入wxs文件 -->
<wxs module="tools" src="../../wxs/filter.wxs"></wxs>
<view class="detail">
<view class="title">{{subject.Title}}</view>
<view class="section">
<view>{{subject.Section.Name}}</view>
<view>{{tools.formatTime(subject.Createtime)}}</view>
</view>
<view>
<view class="title">答案</view>
<view>{{subject.Answer}}</view>
</view>
<view>
<view class="title">解析</view>
<view>{{subject.Desc}}</view>
</view>
</view>
2.js url="../detail/detail?id={{item.Id}}"在题目wxml中传一个参数id给详情页
Page({
/**
* 页面的初始数据
*/
data: {
//定一个题目对象
subject:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取题目的id
let {id} = options
this.loadSubject(id)
},
//加载完整题目信息的方法
async loadSubject(id){
let r = await wx.$get('Subject/GetSubject',{id})
//更新页面显示
this.setData({
subject:r
})
},
})
