微信小程序——校園服務小程序（四）校園論壇加預約理發服務

上一篇介紹了如何用戶如何將帖子的內容發送到數據庫中。

這次我們來介紹一下如何將庫中數據渲染出來，

通過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.idwx.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.datalet old_data=this.data.nowdaythis.setData({//獲取數據nowday: old_data.concat(new_data),paga:page},res =>{console.log(res,"觸底刷新成功");})})loveCollection.skip(page).get().then(res =>{let new_data=res.datalet old_data=this.data.lovethis.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.idconsole.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-itemwx: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-searchvalue="{{ 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>

總結

以上是生活随笔為你收集整理的微信小程序——校园服务小程序（四）校园论坛加预约理发服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。