微信小程序宠物论坛3
首页模块
界面
首页展示所有帖子,下拉可以刷新。
JS部分
// 初始化数据化
const db = wx.cloud.database();
const cont = db.collection('post');
Page({
data:{
post:[],//帖子
postnum:0,//帖子数量
fintime:'',
},
//下拉刷新加载数据
onPullDownRefresh: function () {
wx.showNavigationBarLoading()
wx.hideNavigationBarLoading();
const _ = db.command
wx.cloud.callFunction({
name: 'getpost',
data: {
mark: 'get'
}
}).then(res => {
this.setData({
post: res.result.data
})
}).catch(err => { })
setTimeout(function () {
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1500);
},
onLoad: function (options) {
wx.cloud.callFunction({
name: 'getpost',
data: {
mark: 'get'
}
}).then(res => {
this.setData({
post:res.result.data
})
}).catch(err => { })
}
})
WXML部分
<view class="main" wx:for="{{post}}" wx:key="post">
<!-- 帖子ID显示 -->
<navigator url="../detail/detail?id={{item._id}}" open-type="navigate" >
<!-- 标题显示 -->
<view class="title">{{item.title}}</view>
<view class="pic">
<!-- 显示第一张图片 -->
<image style="width:30%;height:69px;" src="{{item.images[0]}}"/>
<!-- 头像,发帖人昵称,时间 -->
<view class="userinfo" style="flex-direction:row">
<image class="userinfo-avatar" src="{{item.heads}}" background-size="cover"></image>
<text decode="{{true}}" class="userinfo-nickname"> {{item.nickname}}</text>
<text decode="{{true}}" class="userinfo-time"> {{item.time}}</text>
</view>
</view>
<view class="line"></view>
</navigator>
</view>
WXSS部分
.title{
font-weight: bold;
}
.desc{
font-size:70%;
}
.userinfo-avatar {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
.userinfo-nickname {
font-weight:bold;
font-size:75%;
color: black;
margin-bottom:30px;
}
.userinfo-time{
font-size:65%;
padding-bottom:40px
}
.line {
border: 1px solid #ccc;
opacity: 0.2;
}
.main{
padding-left: 4%;
padding-right: 4%
}