嗨客网搜索
微信小程序评论

微信小程序评论教程

在平时微信小程序的使用过程中,我们会遇到那种对某种观点发表评论的动作。或者对某种观点进行回复。我们可以使用 inputbutton 组件结合,来构造一个写回复的功能。

代码

wxml文件

<view class="placeholder-view"></view> <view class="commentPublish"> <input class="answer-input" placeholder="写回复"/> <button class="publishButton" size="{{mini}}"> 提交 </button> </view>

wxss文件

.placeholder-view{ width: 750rpx; height: 80rpx; } .commentPublish{ position: fixed; bottom: 0rpx; display: flex; align-items: center; /*纵轴*/ justify-content: center; /*横轴*/ z-index: 999; width: 750rpx; font-size: 28rpx; height: 80rpx; background-color: #ffffff; padding-left: 10rpx; } .answer-input{ padding-left: 20rpx; width:740rpx ; } .publishButton{ color: #2C6BCD; }

描述

我们将 input 控件和 button 控件以固定的位置展示在底端。永远出现在页面的底部。

肯定会有人比较奇怪,为什么在回复的内容前面增加一个空的 view 标签。而且它的高度和我们定义的回复功能组件的高度一样的。它的存在主要是为了占用一部分空间,这样如果页面数据量比较大,涉及到分页的时候,就会把那部分空间占住,不会有数据展示。那么页面上面的数据就只会在我们的回复功能的控件之前展示了。

效果

上面页面执行的效果如下

08 点评.png

评论总结

我们用 input 插件和 button 插件将这个组合以固定的方式,在页面的底端展示,同时为了有更好的用户体验,我们在该组建组合的后面特意加了一个 view 插件来占用地方,这样的话,页面上面的数据就不会在点评控件后面出现了。

嗨客网顶部