大家好,又见面了,我是你们的朋友全栈君。
上一篇介绍了如何用户如何将帖子的内容发送到数据库中。
这次我们来介绍一下如何将库中数据渲染出来,
通过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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191273.html原文链接:https://javaforall.cn