uniapp 微信小程序留言板+动态显示新增留言

功能介绍：实现一个留言板的显示，以及留言后可以动态显示。

话不多说，let's start !

先上页面(略丑，非重点)

上页面代码（头像图片暂且写死的）：

<view class="uni-padding-wrap"><form @submit="commitComments"><textarea class="contentTextArea" name="commentContent" v-model="commentContent" placeholder="请输入您的反馈......"></textarea><button class="commitButton" formType="submit">反馈</button></form>       <view class="uni-comment"><view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index"><view class="uni-comment-face"><image src="../../static/head.jpg" mode="widthFix"></image></view><view class="uni-comment-body"><view class="uni-comment-top"><text>{{commentsList.nickname==''||commentsList.nickname==null?'匿名':commentsList.nickname}}</text></view><view class="uni-comment-date"><text>{{commentsList.created_at}}</text></view><view class="uni-comment-content">{{commentsList.content}}</view></view></view></view>
</view>

上样式代码：

        .uni-padding-wrap {padding: 30upx;}view {font-size: 28upx;}.uni-comment {padding: 5rpx 0;display: flex;flex-grow: 1;flex-direction: column;margin-top: 20rpx;border-bottom: 1rpx solid #e9e7ef;}.uni-comment-list {flex-wrap: nowrap;padding: 10rpx 0;margin: 10rpx 0;width: 100%;display: flex;border-bottom: 1rpx solid #e9e7ef;}.uni-comment-face {width: 70upx;height: 70upx;border-radius: 100%;margin-right: 20upx;flex-shrink: 0;overflow: hidden;}.uni-comment-face image {width: 100%;border-radius: 100%;}.uni-comment-body {width: 100%;}.uni-comment-top {line-height: 1.5em;justify-content: space-between;}.uni-comment-top text {color: #0A98D5;font-size: 24upx;}.uni-comment-date {line-height: 38upx;flex-direction: row;justify-content: space-between;display: flex !important;flex-grow: 1;color: gray;}.uni-comment-date view {color: #666666;font-size: 24upx;line-height: 38upx;}.uni-comment-content {line-height: 1.6em;font-size: 28upx;padding: 8rpx 0;}.uni-comment-replay-btn {background: #FFF;font-size: 24upx;line-height: 28upx;padding: 5rpx 20upx;border-radius: 30upx;color: #333 !important;margin: 0 10upx;}.commitButton{color: white;width: 90%;margin: 0rpx auto;height: 75rpx;line-height: 75rpx;font-size: 37rpx;background: linear-gradient(left top,#86B6FD, #8fc9fc,#86B6FD);}.contentTextArea{font-size: 30rpx;height: 170rpx;border:1rpx solid #e9e7ef;width: 86%;margin: 0rpx auto;margin-bottom: 15rpx;padding: 20rpx 0 0 20rpx;border-radius: 6rpx;}

记得在data中加上：

return {commentsList:[],index:'',nickname:'',created_user_id:'',commentContent:'',}

首先我们做显示，即获取留言列表接口并展示(如下图所示，将数据存在commentsList)：

uni.request({url: 'http://xxx/xxx',method: 'GET',data: {},success: res => {              this.commentsList=res.data.data;},fail: () => {},complete: () => {}
});

此时你是可以正常显示了，接下来我们做添加留言以及动态显示。在method中写下点击留言事件的方法，代码如下：

重要是两个步骤：1⃣️请求添加接口，传递输入的留言内容及其他参数；2⃣️添加成功后动态在显示界面插入新留言。

commitComments() {//这里定义你自己要请求添加留言接口带的值，我是从接口获取到了var created_user_id = this.created_user_id;var content = this.commentContent;var nickname = this.nickname;var commentsList=this.commentsList;uni.request({   url: 'http://xxxx/xxx/create,method: 'POST',header: {'content-type': "application/x-www-form-urlencoded"},//因为我要传递数组格式的comment:{content:'',userid:''}给后台所以这样写，你直接传字段的话就去掉前面的comment和中括号就好了。data: {'comment[content]': content,                  'comment[created_user_id]': created_user_id,},success: function(res) {if (res.data.success == 1) {uni.showToast({icon: 'success',title: '留言成功'});   //这是重点，意思是动态添加，使用unshift就插在前面，也可以用push                         commentsList.total += 1;commentsList.unshift({"nickname": nickname,"content":content,"id":res.data.id,                                  });                                 } else {uni.showToast({title: res.data.data,icon: "none"});}}})},

然后这个功能就到此结束了。

❤️感谢观赏！

uniapp 微信小程序留言板+动态显示新增留言相关推荐

uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...

uniapp 微信小程序留言板+动态显示新增留言

uniapp 微信小程序留言板+动态显示新增留言相关推荐

最新文章

热门文章