微信小程序评论

微信小程序评论教程

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

代码

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 标签。而且它的高度和我们定义的回复功能组件的高度一样的。它的存在主要是为了占用一部分空间，这样如果页面数据量比较大，涉及到分页的时候，就会把那部分空间占住，不会有数据展示。那么页面上面的数据就只会在我们的回复功能的控件之前展示了。

效果

上面页面执行的效果如下

评论总结

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