15 changed files with 372 additions and 115 deletions
@ -0,0 +1,13 @@ |
|||||
|
"use strict"; |
||||
|
Component({ |
||||
|
properties: { |
||||
|
loadType: { |
||||
|
type: String, |
||||
|
value: 'more' |
||||
|
}, |
||||
|
loadVisible: { |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
<view class="load-more" style="visibility: {{ loadVisible ? 'visible': 'hidden'}}"> |
||||
|
<view class="more-data" wx:if="{{loadType === 'more'}}"> |
||||
|
<!-- <image src="../../images/loading.gif" /> --> |
||||
|
<view class="content">加载中...</view> |
||||
|
</view> |
||||
|
<view class="no-data" wx:elif="{{loadType === 'none'}}"> |
||||
|
<view class="content">没有更多了~</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,33 @@ |
|||||
|
.load-more { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.load-more .more-data { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.load-more .more-data image { |
||||
|
width: 35rpx; |
||||
|
height: 35rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.load-more .more-data .content { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.load-more .no-data { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 100rpx; |
||||
|
} |
||||
|
.load-more .no-data .content { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,66 +1,85 @@ |
|||||
// pages/message/message.js
|
const app = getApp() |
||||
|
import {message} from "../../api/index" |
||||
Page({ |
Page({ |
||||
|
data: { |
||||
/** |
pageSize:10, |
||||
* 页面的初始数据 |
pageNo:1, |
||||
*/ |
tableData:[], |
||||
data: { |
lowerThreshold:'5', |
||||
|
loadMoreVisible:false, |
||||
}, |
loadMoreType: "none", |
||||
|
nodata:false, |
||||
/** |
}, |
||||
* 生命周期函数--监听页面加载 |
// 事件处理函数
|
||||
*/ |
onLoad: async function () { |
||||
onLoad(options) { |
|
||||
|
}, |
||||
}, |
onShow(){ |
||||
|
|
||||
/** |
this.getIntelligentMessage() |
||||
* 生命周期函数--监听页面初次渲染完成 |
}, |
||||
*/ |
onPullDownRefresh() { |
||||
onReady() { |
this.setData({ |
||||
|
pageNo:1, |
||||
}, |
tableData:[] |
||||
|
}) |
||||
/** |
this.getIntelligentMessage() |
||||
* 生命周期函数--监听页面显示 |
}, |
||||
*/ |
|
||||
onShow() { |
onScrollToLower(e){ |
||||
|
console.log(e); |
||||
}, |
if (this.data.loadMoreType === 'more') { |
||||
|
this.setData({ |
||||
/** |
loadMoreVisible: true, |
||||
* 生命周期函数--监听页面隐藏 |
}) |
||||
*/ |
this.data.pageNo += 1 |
||||
onHide() { |
this.getIntelligentMessage() |
||||
|
} |
||||
}, |
}, |
||||
|
getIntelligentMessage(){ |
||||
/** |
this.setData({ |
||||
* 生命周期函数--监听页面卸载 |
loadMoreVisible: true, |
||||
*/ |
nodata: false, |
||||
onUnload() { |
loadMoreType: "more", |
||||
|
}) |
||||
}, |
const parm = { |
||||
|
limit:this.data.pageSize, |
||||
/** |
pageNum:this.data.pageNo |
||||
* 页面相关事件处理函数--监听用户下拉动作 |
|
||||
*/ |
|
||||
onPullDownRefresh() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面上拉触底事件的处理函数 |
|
||||
*/ |
|
||||
onReachBottom() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 用户点击右上角分享 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
|
|
||||
} |
} |
||||
|
if(!parm.type) delete parm.type |
||||
|
message(parm).then(res=>{ |
||||
|
this.setData({ |
||||
|
loadMoreType: res.data.records.length === this.data.pageSize ? 'more' : 'none', |
||||
|
tableData: this.data.tableData.concat(res.data.records), |
||||
|
}) |
||||
|
if (this.data.tableData.length == 0) { |
||||
|
this.setData({ |
||||
|
loadMoreVisible: false, |
||||
|
nodata: true |
||||
|
}) |
||||
|
} |
||||
|
}).catch(err=>{ |
||||
|
console.log(err); |
||||
|
this.setData({ |
||||
|
loadMoreVisible: false, |
||||
|
nodata: true, |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
handelClickClear(){ |
||||
|
clearMessage().then(res=>{ |
||||
|
this.setData({ |
||||
|
tableData:[], |
||||
|
pageNo:1 |
||||
|
}) |
||||
|
this.getIntelligentMessage() |
||||
|
}).catch(err=>{ |
||||
|
console.log(err); |
||||
|
}) |
||||
|
}, |
||||
}) |
}) |
||||
|
|
||||
|
|
||||
|
|||||
@ -1,3 +1,10 @@ |
|||||
{ |
{ |
||||
"usingComponents": {} |
"usingComponents": { |
||||
|
"load-more": "/components/loadMore/loadMore", |
||||
|
"van-empty": "@vant/weapp/empty/index" |
||||
|
}, |
||||
|
"navigationBarTitleText": "消息", |
||||
|
"enablePullDownRefresh": true, |
||||
|
"backgroundColor": "#f8f8f8", |
||||
|
"backgroundTextStyle": "dark" |
||||
} |
} |
||||
@ -1,2 +1,25 @@ |
|||||
<!--pages/message/message.wxml--> |
<view class="content"> |
||||
<text>pages/message/message.wxml</text> |
<scroll-view class="scroll" scroll-y="{{true}}" lower-threshold="{{ lowerThreshold }}" bindscrolltolower="onScrollToLower"> |
||||
|
<view class="box"> |
||||
|
<view class="card" wx:for="{{tableData}}" wx:key="index" data-item="{{item}}" data-index="{{index}}"> |
||||
|
<view class="left"> |
||||
|
<image src="/images/icon/notice.png" class="icon-56" mode="" /> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="top"><text class="title">{{item.title}}</text> |
||||
|
<text class="{{item.readFlag != '1'?'':'gray'}}" style="font-size: 26rpx; font-weight: 300;">{{item.createTime}}</text> |
||||
|
</view> |
||||
|
<view class="bottom"> |
||||
|
<view class=" ellipsis-2"> |
||||
|
{{item.content}} |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<load-more loadVisible="{{loadMoreVisible}}" loadType="{{loadMoreType}}"></load-more> |
||||
|
<van-empty description="描述文字" wx:if="{{nodata}}" /> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<custom-tab-bar></custom-tab-bar> |
||||
@ -1 +1,153 @@ |
|||||
/* pages/message/message.wxss */ |
page { |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
overflow: hidden; |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.select{ |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 40rpx; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.select view { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 30rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #3A80E7; |
||||
|
} |
||||
|
.select view image{ |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
margin: 0 9rpx; |
||||
|
} |
||||
|
.select .delete { |
||||
|
font-size: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.select .delete image{ |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
padding:0 20rpx ; |
||||
|
margin-top: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.content .scroll { |
||||
|
height: calc(100vh - 130rpx); |
||||
|
} |
||||
|
|
||||
|
.content .scroll .box{ |
||||
|
border-radius: 20rpx; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.content .card{ |
||||
|
width: 100%; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
padding: 20rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.content .card::before{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 30rpx; /* 调整间距 */ |
||||
|
right: 30rpx; /* 调整间距 */ |
||||
|
bottom: 0; |
||||
|
border-bottom: 2rpx solid #EAEAEA; |
||||
|
} |
||||
|
|
||||
|
.blue{ |
||||
|
color:#5693EE; |
||||
|
} |
||||
|
.yellow{ |
||||
|
color:#E2944D; |
||||
|
} |
||||
|
.cyan{ |
||||
|
color: #2EB4F2 ; |
||||
|
} |
||||
|
.cyanBg{ |
||||
|
background: rgba(56,189,253,0.1); |
||||
|
} |
||||
|
.yellowBg{ |
||||
|
background: rgba(248,188,122,0.1); |
||||
|
} |
||||
|
.blueBg{ |
||||
|
background: rgba(86,147,238,0.1); |
||||
|
} |
||||
|
.gray{ |
||||
|
color: #999999 !important; |
||||
|
} |
||||
|
|
||||
|
.content .card .right{ |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
} |
||||
|
.content .card .right .top{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.content .card .right .title{ |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 300; |
||||
|
overflow: hidden; |
||||
|
font-weight: 600; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
width: calc(100% - 250rpx); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.content .card .right .bottom{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.textOver{ |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
max-width: 250rpx; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
.content .card .right .bottom .flex_box{ |
||||
|
display: flex; |
||||
|
justify-content: left; |
||||
|
} |
||||
|
.left{ |
||||
|
margin-right: 28rpx; |
||||
|
} |
||||
|
.bgBule{ |
||||
|
background-color: #dfebfb; |
||||
|
border: 1px solid #3A80E7; |
||||
|
border-radius: 32rpx; |
||||
|
padding:10rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bgBule image{ |
||||
|
margin-left: 50rpx !important; |
||||
|
} |
||||
|
|
||||
Loading…
Reference in new issue