<view class="content">
<scroll-view scroll-y='true' style="height:calc(100vh - 1rpx);" scroll-with-animation="true" scroll-y
lower-threshold="100" bindscrolltolower="scrollToLower">
<view class="subcontent">
<view class="exams">
<view class="exam" wx:for="{{exams}}" wx:key="index" wx:for-item="item" data-item="{{item}}">
<image src="../../../imgs/home/exam.png"></image>
<view class="exam_top">{{item.paperName}}</view>
<view class="exam_bottom">
<view class="exam_left">
<text>共{{item.qstCount}}道题</text>
<text>时间：{{item.replyTime}}分钟</text>
</view>
<view wx:if="{{item.sellingPrice}}" class="exam_right">
<text>￥{{item.originalPrice}}</text>
<text>￥{{item.sellingPrice}}</text>
</view>
<view wx:else class="exam_right2">免费</view>
</view>
</view>
</view>
</view>
<view class='data-loading' hidden='{{hasNextPage}}' style="background:#F4F7FB;">
-- 没有更多了 --
</view>
</scroll-view>
</view>
const Util = require("../../../utils/util")
Page({
data: {
exams: [],
current: 1,
size: 10,
// 加载更多
hasNextPage: true, // 判断是否有下一页
loadingData: false, // 防抖。true表示正在调用接口，阻止重复调用。
},
onLoad: function (options) {
this.getPapperBarGraph()
},
// 获取考试
async getPapperBarGraph() {
let url = 'front/exam-exam-paper/getPapperBarGraph'
let obj = {
current: this.data.current,
size: this.data.size,
papperName: '5',
ifChapter: false,
fieldSort: '',
isAsc: '',
subjectId: '',
ruleId: '',
}
Util.showLoading()
var data = await Util.post(url, obj, 2)
if (data.status == '200') {
var allDatas
// 判断是否是第一页
if (this.data.current == 1) {
allDatas = data.data.list
} else {
allDatas = [...this.data.exams, ...data.data.list]
}
this.setData({
loadingData: false,
exams: allDatas
})
// 判断还有没有更多数据
if (!data.data.hasNextPage) {
this.setData({
hasNextPage: false
})
}
}
},
/**
* 页面上拉触底事件的处理函数
*/
scrollToLower: function () {
if (this.data.hasNextPage) {
var loadingData = this.data.loadingData
if (loadingData) {
return;
}
var current = this.data.current + 1
this.setData({
loadingData: true,
current
})
this.getPapperBarGraph()
}
},
})
.content {
overflow: hidden
}
.search_div {
overflow: hidden;
height: 88rpx;
background-color: #fff;
}
.cancel {
position: absolute;
top: 14rpx;
right: 16rpx;
font-size: 32rpx;
color: #3B3849;
padding: 7rpx;
}
.placeholder_input {
color: #333;
}
.search_input {
margin-top: 11rpx;
margin-left: 29rpx;
width: 623rpx;
height: 66rpx;
position: relative;
background: #FBFBFB;
border-radius: 8rpx;
overflow: hidden;
}
.search_input input {
list-style: none;
outline: none;
border: none;
padding-left: 40rpx;
height: 66rpx;
line-height: 66rpx;
color: #333;
font-size: 30rpx;
width: 500rpx;
}
.search_input image {
width: 33rpx;
height: 33rpx;
position: absolute;
top: 17rpx;
right: 20rpx;
}
/* tab */
.tabs {
margin-bottom: 16rpx;
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #fff;
font-size: 28rpx;
white-space: nowrap;
top: 0;
left: 0;
z-index: 99;
}
.tab-item {
width: 150rpx;
margin-left: 15rpx;
margin-right: 15rpx;
text-align: center;
display: inline-block;
}
.tab-item.active {
font-size: 32rpx;
color: #3D7EFE;
position: relative;
}
.tab-item.active:after {
content: "";
display: block;
height: 5rpx;
width: 50rpx;
background: #3D7EFE;
position: absolute;
bottom: 0;
left: 49rpx;
border-radius: 16rpx;
}
.subcontent {
background: #fff;
overflow: hidden;
border-radius: 20rpx;
}
.subtitle {
padding-left: 30rpx;
padding-top: 20rpx;
font-size: 36rpx;
color: #3B3849;
font-weight: bold;
}
.more {
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
color: #3D7EFE;
font-size: 26rpx;
}
.more image {
width: 32rpx;
height: 32rpx;
margin-left: 5rpx;
}
/* 课程 套餐 */
.taocans {
padding: 0 30rpx;
background: #fff;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.taocan {
margin-top: 21rpx;
position: relative;
width: 100%;
padding-bottom: 40rpx;
border-bottom: 1px solid #EFEFEF;
}
.taocan image {
width: 260rpx;
height: 143rpx;
position: absolute;
top: 0;
left: 0;
}
.taocan view:nth-child(2) {
font-size: 34rpx;
color: #3B3849;
margin-left: 280rpx;
height: 100rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.taocan_tip {
color: #FF4747;
font-size: 20rpx;
position: absolute;
right: 0;
bottom: 55rpx;
}
.taocan_price {
color: #FF4747;
font-size: 34rpx;
position: absolute;
right: 0;
bottom: 45rpx;
}
.taocan_price text {
font-size: 20rpx;
}
.taocan_price2 {
color: #FF4747;
font-size: 36rpx;
position: absolute;
right: 0;
bottom: 45rpx;
}
.taocan_detail {
color: #8B93A0;
font-size: 24rpx;
margin-top: 12rpx;
margin-left: 280rpx;
}
.taocan_detail text:nth-child(1) {
padding-right: 15rpx;
}
.taocan_detail view:nth-child(2) {
width: 2px;
height: 20rpx;
background: #8B93A0;
display: inline-block;
margin-left: 0;
}
.taocan_detail text:nth-child(3) {
padding-left: 15rpx;
}
/* 题库 */
.exams {
background: #fff;
}
.exam {
height: 156rpx;
margin-left: 30rpx;
margin-right: 30rpx;
border-bottom: 1px solid #ECECEC;
padding-top: 20rpx;
position: relative;
}
.exam image {
position: absolute;
top: 22rpx;
left: 0;
width: 76rpx;
height: 95rpx;
}
.exam_top {
padding-left: 109rpx;
padding-right: 30rpx;
font-size: 34rpx;
color: #3B3849;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.exam_bottom {
align-items: baseline;
padding-top: 20rpx;
font-size: 24rpx;
color: #8B93A0;
display: flex;
justify-content: space-between;
}
.exam_left {
padding-left: 109rpx;
}
.exam_left text:nth-child(1) {
padding-right: 20rpx;
}
.exam_right text:nth-child(1) {
text-decoration: line-through
}
.exam_right text:nth-child(2) {
font-size: 30rpx;
color: #FF4747;
padding-left: 20rpx;
}
.exam_right2 {
font-size: 36rpx;
color: #FF4747;
}
/* 文章article */
.articles {
overflow: hidden;
}
.article {
width: 690rpx;
height: 210rpx;
background: #fff;
margin-left: 30rpx;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ECECEC;
}
.article_img {
width: 240rpx;
height: 134rpx;
position: absolute;
right: 20rpx;
top: 34rpx;
}
.article_title {
height: 95rpx;
font-size: 34rpx;
color: #3B3849;
margin: 30rpx 280rpx 16rpx 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.article_detail {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-right: 280rpx;
font-size: 24rpx;
color: #8B93A0;
}
.article_detail image {
width: 24rpx;
height: 15rpx;
}
.article_left {
display: inline-block;
font-size: 24rpx;
color: #3D7EFE;
padding: 3rpx 9rpx;
border: 1px solid #3D7EFE;
}
.article_right text {
padding-left: 15rpx;
}
/*上拉加载更多*/
.data-loading {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 24rpx;
color:#333;
background: #eee;
}
网友评论