我的校园服务小程序_有创意校园的微信小程序

大家好，又见面了，我是你们的朋友全栈君。

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

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

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

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

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

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

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

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

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

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

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

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

下面是源码：

代码语言：javascript复制

//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();
},
})

代码语言：javascript复制

//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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/191273.html原文链接：https://javaforall.cn

渲染 https 网络安全小程序微信

0 人点赞