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

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

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

通过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>

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

微信小程序——校园服务小程序（二）校园论坛加预约理发服务
微信小程序--校园服务小程序(二) 环境搭建好了,我们开始编写代码. 首先我们来看 "我的" 界面,先写一下登录功能. 先看一下wxml 通过判断canIUseGetUserPro ...
校园服务小程序源代码分享园服务微信小程序全开源版源码-包含服务端
2021年4月17日更新严正声明: [请一定勿将程序用户商业用途且包括用此程序去参加各类学校的竞赛或者其他以获取名利而参与的竞赛等,一旦被原作者发现将会面临严重的侵权责任后果,特别是被获奖后会遭 ...
基于微信校园跑腿小程序系统设计与实现开题报告
毕业论文基于微信校园跑腿小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 Xxx ...
软件工程毕业设计课题（81）微信小程序毕业设计PHP校园跑腿小程序系统设计与实现
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信校园跑腿小程序系统,前台用户使用小程序发布跑腿任何和接跑腿任务,后台管理使用基于PHP+MySql的B/S架构:通过后台管理跑腿的用户. ...
计算机毕业设计php+vue基于微信小程序的贵小团校园社团小程序
项目介绍随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息.为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代, ...
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
计算机毕业设计ssm+vue基本微信小程序的拼车自助服务小程序-网约车拼车系统
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱拼车自助服务小程序的设计与开发被用户普遍使用, ...
微信小程序校园生活小助手+后台管理系统前后分离VUE
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称微信小程序校园生活小助手+后台管理系统前后分离VUE 系统说明 <微信小程 ...
[含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离VUE[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 [含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离V ...
计算机毕业设计ssm+vue基本微信小程序的拼车自助服务小程序
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱拼车自助服务小程序的设计与开发被用户普遍使用 ...

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

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

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

最新文章

热门文章