大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

微信小程序——校园服务小程序（四）校园论坛加预约理发服务

上一篇介绍了如何用户如何将帖子的内容发送到数据库中。

这次我们来介绍一下如何将库中数据渲染出来，

通过get得到对应表的数据，在wxml上通过for循环渲染数据表中的值。

这里以我们的主页面为例，

首先思考一下，一个展示帖子的主页面要有什么功能，

1.帖子在添加时会将新的帖子放在最后，再渲染时也会被渲染在后面，这样是不可以的，每一次进入界面都是第一个用户上传的帖子。

这里我们需要对帖子进行一次排序，这里我使用了orderBy(‘timeone’,‘desc’)，进行排序，第一个参数是排列规则的属性，第二个参数是代表倒序。

上拉刷新功能也是比不可少的，在这里叶别忘了排序，不然刷新后会将比较久远的帖子重新刷新在上方。

由于小程序一页只允许有20，所以触底刷新也是有必要的。

我们使用skip（常用于分页），变量page及concat，来实现触底刷新，skip：指定查询返回结果时从指定序列后的结果开始返回，page：储存着当前的页面数，concat：负责连接新数据和旧数据。

同时点击帖子应该进入详情界面，这里我们应该在这里统计一下点击量，非常简单，在跳转按钮对应的点击事件方法中，将库中的点击属性数加一。（inc）

下面是源码：

//js
// pages/home/home.js
const db = wx.cloud.database()
const lbtCollection = db.collection('lbt')
const nowdayCollection = db.collection('nowday')
//const marketCollection = db.collection('market')
//const lostcomeCollection = db.collection('lostcome')
const loveCollection = db.collection('love')
const peopleCollection = db.collection('people')
const _ = db.command
Page({ 
   
  data: { 
   
    page:0,
    open:false,
    loadingHidden:true,
    xindex: 0,

   },
   

   onChange(event) { 
   
    // event.detail 为当前输入的值
    console.log(event.detail);
  },

  onChange: function (e) { 
   
    this.setData({ 
   
      xindex: e.detail.current
    });
  },
  golbtindex(event){ 
   
    let loveid=event.currentTarget.dataset.id
    wx.navigateTo({ 
   
      url: '../lbtindex/lbtindex?loveid='+loveid,//添加页面参数以保证跳转到对应的页面
    })
  },
  onLoad: function() { 
   
    this.setData({ 
   
      loadingHidden: false
     });
    lbtCollection.get().then(res =>{ 
   
      this.setData({ 
   
        lbt: res.data
      })
    })//从数据库中获取数据
    nowdayCollection.orderBy('timeone','desc').get().then(res =>{ 
   
      this.setData({ 
   
        nowday: res.data
      })
      console.log(res);
    }).then(res=>{ 
   
      console.log("校园趣事");
      this.setData({ 
   
        loadingHidden: true
       });
    })
    loveCollection.orderBy('timeone','desc').get().then(res =>{ 
   
      this.setData({ 
   
        love: res.data
      })
      console.log(res);
    }).then(res=>{ 
   
      console.log("表白墙获取成功");
      this.setData({ 
   
        loadingHidden: true
       });
    })
    peopleCollection.get().then(res =>{ 
   
      this.setData({ 
   
        people: res.data
      })
      console.log(res);
    }).then(res=>{ 
   
      console.log("用户获取成功");
      this.setData({ 
   
        loadingHidden: true
       });
    })
  },
  //下拉刷新 注意：要在json中声明"enablePullDownRefresh":true,
  onPullDownRefresh:function(){ 
   
    nowdayCollection.orderBy('timeone','desc').get().then(res =>{ 
   
      this.setData({ 
   //获取数据
        nowday: res.data
      },res =>{ 
   
        console.log("数据更新完成");
        wx.stopPullDownRefresh()//获取数据完成后立即缩回
      })
    })
    loveCollection.orderBy('timeone','desc').get().then(res =>{ 
   
      this.setData({ 
   //获取数据
        love: res.data
      },res =>{ 
   
        console.log("数据更新完成");
        wx.stopPullDownRefresh()//获取数据完成后立即缩回
      })
    })
  },
  //页面上拉触底事件处理函数
  onReachBottom:function(){ 
   
    console.log("触底了");
    let page=this.data.page+20;
    console.log(page);
    nowdayCollection.skip(page).get().then(res =>{ 
   
      let new_data=res.data
      let old_data=this.data.nowday
      this.setData({ 
   //获取数据
        nowday: old_data.concat(new_data),
        paga:page
      },res =>{ 
   
        console.log(res,"触底刷新成功");
    })
  })
    loveCollection.skip(page).get().then(res =>{ 
   
      let new_data=res.data
      let old_data=this.data.love
      this.setData({ 
   //获取数据
        love: old_data.concat(new_data),
        page:page
      },res =>{ 
   
        console.log(res);
    })
  })
},
click:function(event){ 
   //点击量更新
  loveCollection.doc(event.currentTarget.dataset.id).update({ 
   
    data: { 
   
      view:_.inc(1)
    }
  })
},
  gosend(){ 
   
    wx.navigateTo({ 
   
      url: '../sendin/sendin',
    })
  },
  gochoose(){ 
   
    wx.navigateTo({ 
   
      url: '../allchoose/allchoose',
    })
  },
  goid(event){ 
   
    nowdayCollection.doc(event.currentTarget.dataset.id).get().then(res =>{ 
   
      //let age='' 
      this.setData({ 
   
        nowday: res.data
      })
      wx.setStorageSync('oldcomeid', res.data._id)//将数据导入缓存
      console.log(res);
      let textid=event.currentTarget.dataset.id
      console.log(event,"evnet内容");
      //console.log(event.currentTarget.dataset.id);
      console.log(textid);
      wx.cloud.callFunction({ 
   
        name:"viewnum1",
        data:{ 
   
          id:event.currentTarget.dataset.id,
          selectsql:"nowday"
        }
      }).then(res=>{ 
   
        console.log(res);
      })
      // nowdayCollection.doc(event.currentTarget.dataset.id).update({ 
   
      // data: { 
   
      // view:_.inc(1)
      // }
      // })
      wx.navigateTo({ 
   
        url: '../textindex/textindex?textid='+textid,//添加页面参数以保证跳转到对应的页面
      })
    })//从数据库中获取数据
  },
  goloveindex(event){ 
   
    loveCollection.doc(event.currentTarget.dataset.id).get().then(res =>{ 
   
      //let age='' 
      this.setData({ 
   
        love: res.data
      })
      // wx.setStorageSync('oldcomeid', res.data._id)//将数据导入缓存
      console.log(res);
      let loveid=event.currentTarget.dataset.id
      //console.log(event.currentTarget.dataset.id);
      console.log(loveid);
      wx.cloud.callFunction({ 
   
        name:"viewnum1",
        data:{ 
   
          id:event.currentTarget.dataset.id,
          selectsql:"love"
        }
      }).then(res=>{ 
   
        console.log(res);
      })
      // loveCollection.doc(event.currentTarget.dataset.id).update({ 
   
      // data: { 
   
      // view:_.inc(1)
      // }
      // })
      wx.navigateTo({ 
   
        url: '../loveindex/loveindex?loveid='+loveid,//添加页面参数以保证跳转到对应的页面
      })
    })//从数据库中获取数据
  },
  searchall(){ 
   
    wx.navigateTo({ 
   
      url: '../search/search', //添加页面参数以保证跳转到对应的页面
    })
  },
  onShow: function () { 
   
    if(typeof this.getTabBar==='function' && this.getTabBar()){ 
   
      this.getTabBar().setData({ 
   
        selected:0
      })
    }

    this.onLoad();
    },
})

//wxml
<!--pages/home/home.wxml-->
<!-- <block>
<view class="view_1">
  <van-button class="search_1" round type="default" block bind:click="navigateToSearch">搜索</van-button>
</view>
<view>
  <view class="index_swiper">
    <swiper class="swiper_1" autoplay indicator-dots circular>
      <swiper-item
      wx:for="{ 
   {lbt}}"
      wx:key="_id"
      ><!-- -->
        <!-- 图片标签
        mode属性
          widthFix 让图片等比例自适应
      --> 
        <!-- <navigator>
          <image mode="widthFix" src="{ 
   {item.image}}"></image>
        </navigator>
      </swiper-item> 
    </swiper>
  </view> -->


  <block class="page-top { 
   {open ? ['c-state','cover'] : ''}} ">
  <van-search
  value="{ 
   { value }}"
  shape="round"
  background="#576b95"
  placeholder="请输入搜索关键词"
  bindtap="searchall"
/>
<view>
  <view class="container">
    <swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true' autoplay="{ 
   {true}}">
      
        <swiper-item wx:for="{ 
   {lbt}}"
      wx:key="_id">
          <image bindtap="golbtindex" data-id="{ 
   {item._id}}" class="{ 
   {index==xindex?'imageBanner':'imageBanner_small'}}" data-index="{ 
   {index}}" data-item="item" src="{ 
   {item.image}}">   
          </image>
        </swiper-item>
     
    </swiper>
    </view>
   </view>
  <!-- <button bindtap="gochoose">更多分类</button> -->
  <view class="tab_homefenlei">
    <!-- <view class="tab_fenlei"> -->
<image src="../../icons/felei.png" class="tab_fenleiimage" bindtap="gochoose"></image>
<!-- <view class="textqushi">更多分类</view> -->
<!-- </view> -->
<view>分类</view>
  </view>
  <view class="tab_homezhongjian">
    <view class="tab_homequshi">
      <view class="tab_xiaoyuan" >
      <image src="../../icons/xiaoyuanquanzi.png" class="tab_xiaoyuanimage" ></image>
      <view class="textqushi">校 园 趣 事</view>
    </view>
    </view>
    <view class="tab_homekaobai">
      <view class="tab_kaobai">
      <image src="../../icons/xiaogaobai.png" class="tab_kaobaiimage"></image>
      <view class="textqushi">告 白 墙</view>
    </view>
    </view>
  </view>


<view class="vw_home1">
  <view style="flex:1;height:4000px" class="vw_h2">
    <view wx:for="{ 
   {nowday}}"  class="vw_imag1" bindtap="goid" data-id="{ 
   {item._id}}">
      <image src="{ 
   {item.pages}}" mode="widthFix" class="image1"></image>
      <view class="vw_tx1">
          <text wx:if="{ 
   {item.title!=''}}">{ 
   { 
   item.title}}</text>
          <text wx:else>标题都么得有</text>
      </view>
      <view class="home_vwimage">
        <image class="home_image1" src="{ 
   {item.wxpages}}"></image>
        <text class="home_text1">{ 
   { 
   item.wxtitle}}</text>
        <!-- <view>{ 
   { 
   item.shenfen}}</view> -->
        <view wx:if="{ 
   {item.shenfen=='教师'}}" >
      <view class="shenfeijiaos">{ 
   { 
   item.shenfen}}</view>
        </view>
      <block wx:else>
        <view class=xueshen">{ 
   { 
   item.shenfen}}</view></block>
      </view>
      <view class="lldzpl">
        <view><image class="lielanimage" src="../../icons/looking.png"></image><text class="tx_lielan"> { 
   { 
   item.view}}</text></view>
        <view><image class="dainzhanimage" src="../../icons/like.png"></image><text class="tx_xihua">{ 
   { 
   item.good}}</text></view>
        <view><image class="pinlunimage" src="../../icons/comment.png"></image><text class="tx_pinlun">{ 
   { 
   item.sendyou}}</text></view>
      </view>
    </view>
  </view>
  <view style="flex:1;height:4000px" class="vw_h3">
    <view wx:for="{ 
   {love}}" class="vw_imag2" bindtap="goloveindex" data-id="{ 
   {item._id}}">
      <image src="{ 
   {item.pages}}" mode="widthFix" class="image2"></image>
      <view class="vw_tx2">
        <text wx:if="{ 
   {item.title!=''}}">{ 
   { 
   item.title}}</text>
          <text wx:else>标题都么得有</text>
      </view>
      <view class="home_vwimage">
        <image class="home_image1" src="{ 
   {item.wxpages}}"></image>
        <text class="home_text1">{ 
   { 
   item.wxtitle}}</text>
        <view wx:if="{ 
   {item.shenfen=='教师'}}" >
      <view class="shenfeijiaos">{ 
   { 
   item.shenfen}}</view>
        </view>
      <block wx:else>
        <view class=xueshen">{ 
   { 
   item.shenfen}}</view></block>
      </view>
      <view class="lldzpl">
        <view><image class="lielanimage" src="../../icons/looking.png"></image><text class="tx_lielan"> { 
   { 
   item.view}}</text></view>
        <view><image class="dainzhanimage" src="../../icons/like.png"></image><text class="tx_xihua">{ 
   { 
   item.good}}</text></view>
        <view><image class="pinlunimage" src="../../icons/comment.png"></image><text class="tx_pinlun">{ 
   { 
   item.sendyou}}</text></view>
      </view>
    </view>
  </view>

  </view>
</block>
<loading hidden="{ 
   {loadingHidden}}">
 加载中...
</loading>