微信小程序宠物论坛3
微信小程序宠物论坛3
首页模块界面
首页展示所有帖子，下拉可以刷新。
JS部分
// 初始化数据化 const db = wx.cloud.database(); const cont = db.collection('post'); Page({ data:{ post:[],//帖子 postnum:0,//帖子数量 fintime:'', }, //下拉刷新加载数据 onPullDownRefresh: function () { wx.showNavigationBarLoading() wx.hideNavigationBarLoading(); const _ = db.command wx.cloud.callFunction({ name: 'getpost', data: { mark: 'get' } }).then(res => { this.setData({ post: res.result.data }) }).catch(err => { }) setTimeout(function () { wx.hideNavigationBarLoading() //完成停止加载 wx.stopPullDownRefresh() //停止下拉刷新 }, 1500); }, onLoad: function (options) { wx.cloud.callFunction({ name: 'getpost', data: { mark: 'get' } }).then(res => { this.setData({ post:res.result.data }) }).catch(err => { }) } })
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051WXML部分
<view class="main" wx:for="{{post}}" wx:key="post"> <!-- 帖子ID显示 --> <navigator url="../detail/detail?id={{item._id}}" open-type="navigate" > <!-- 标题显示 --> <view class="title">{{item.title}}</view> <view class="pic"> <!-- 显示第一张图片 --> <image style="width:30%;height:69px;" src="{{item.images[0]}}"/> <!-- 头像，发帖人昵称，时间 --> <view class="userinfo" style="flex-direction:row"> <image class="userinfo-avatar" src="{{item.heads}}" background-size="cover"></image> <text decode="{{true}}" class="userinfo-nickname"> {{item.nickname}}</text> <text decode="{{true}}" class="userinfo-time"> {{item.time}}</text> </view> </view> <view class="line"></view> </navigator> </view>
1234567891011121314151617181920WXSS部分
.title{ font-weight: bold; } .desc{ font-size:70%; } .userinfo-avatar { width: 30rpx; height: 30rpx; border-radius: 50%; } .userinfo-nickname { font-weight:bold; font-size:75%; color: black; margin-bottom:30px; } .userinfo-time{ font-size:65%; padding-bottom:40px } .line { border: 1px solid #ccc; opacity: 0.2; } .main{ padding-left: 4%; padding-right: 4% }
12345678910111213141516171819202122232425262728293031323334相关知识
微信小程序宠物论坛3
微信小程序 宠物论坛1[通俗易懂]
微信小程序宠物论坛6
微信小程序宠物论坛2
计算机毕业设计:基于微信小程序的宠物服务交流系统(思路)
宠物寄养微信小程序
宠托师微信小程序
基于微信小程序的流浪宠物救助宠物领养系统的设计与开发
基于微信小程序的宠物寄养小程序，附源码
兽语翻译微信小程序
网址: 微信小程序宠物论坛3 https://m.mcbbbk.com/newsview479521.html
| 上一篇: 家养布偶猫 |
下一篇: 上门喂猫/遛狗 |
