微信小程序宠物论坛3

微信小程序宠物论坛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">&nbsp;&nbsp;{{item.nickname}}</text>
    <text decode="{{true}}" class="userinfo-time">&nbsp;&nbsp;&nbsp;&nbsp;{{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%
}