微信小程序留言板设计

微信小程序实现留言版的界面，主要涉及到了留言以及回复留言的界面。再设计的过程中，主要参考的是微信朋友圈的界面样式进行设计的。但仍存在瑕疵，同时有参考帖子提供的思路微信小程序第二篇：关于评论，和回复，以及再回复的实现和思考。

在设计的时候，由于后台传给我的只有一个留言信息的数组，所以我在request（后台传来的数据是根据最新时间进行排序的）后，对数据进行下面的处理，将存在的数据通过answer的值（answer=0就是默认留言）来存放到两个数组中msgReply[ ] 和 msgLeave[ ] 中

let msgLeave = []let msgReply = []res.data.data.forEach(element => {if (element.answer === 0) {element.children = []msgLeave.push(element)} else {msgReply.push(element)}})msgReply = msgReply.reverse() // 由于留言信息是通过最新时间返回的，这个回复的留言，应该是后留言的信息后显示，所以使用reverse()对数组重新排序msgLeave.forEach(element => {msgReply.forEach(element1 => {if (element1.answer === element.id) {element1.toAuthor = element.authorelement.children.push(element1)}})})

在设计的过程中，由于底部会有一个导航栏，所以我将input框设计在页面的头部，那么此时需要考虑的一个问题就是——将input框悬挂在页面的顶部。

wxml 设计

<view class="page-section"><view class="textarea-wrp"><textarea  class="input_content" auto-height /><button type="primary" bindtap='sendComment' class="btn">发送</button></view>
</view>
<view class="msg_detail ">留言的显示
</view>

wxss 设计

.page-section{position: fixed;width: 100%;/* margin-bottom: 60rpx; */
}
textarea {width: 700rpx;padding: 20rpx 2px;margin: 8px 8px 8px 0;background: #fff;
}
.textarea-wrp {display: flex;padding: 0 25rpx;background: rgb(238, 238, 238);
}
.input_content {background: #fff;/* padding: 2px; */font-size: 14px;width: 90%;height: 40px;border-radius: 3px;
}
.btn {width: 60px;height: 30px;font-size: 13px;margin-top: 4%;
}
.msg_detail {padding-top: 60px; /* 为了解决因为顶部悬停框position: fixed;引起的内容被遮挡的问题 */
}

关于小程序的具体页面详情，以及tabbar的解决见另外一篇博客

微信小程序留言板设计相关推荐

微信小程序做留言板mysql_微信小程序留言板功能源码
微信小程序留言板功能源码?先说一下 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都 ...
uniapp 微信小程序留言板+动态显示新增留言
功能介绍:实现一个留言板的显示,以及留言后可以动态显示. 话不多说,let's start ! 先上页面(略丑,非重点) 上页面代码(头像图片暂且写死的): <view class=" ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端用户完成评价后,商家 ...
基于微信小程序的菜谱设计毕业论文
微信小程序的菜谱设计毕业论文随着"互联网+"的大潮兴起,平台型应用再受热捧.其中,微信小程序凭借其强大的用户基础及其应用时的便捷而深受欢迎.在此基础上,以小程序为载体的社群电商, ...
微信小程序：字体设计符号组合多功能微信小程序源码
这是一款主打字体设计,符号组合等多模板功能的一款微信小程序源码内含多种功能,比如: 花式字体设计表情字体组合设计翅膀字体组合火星文一键生成符号库空白名称彩色网名等等还有很多,所以小编就 ...
微信小程序论坛,校园论坛小程序,微信小程序论坛的设计毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序论坛交流系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台设置录入资讯. ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
微信小程序3-模板与配置
模板与配置 (一)WXML模板语法 1.数据绑定 1.1 数据绑定的基本原则 1.2 在data中定义数据 1.3 Mustache语法格式 1.4 Mustache语法的应用场景 1.5 Musta ...

微信小程序留言板设计

微信小程序留言板设计相关推荐

最新文章

热门文章