微信小程序---评论功能实现

最新推荐文章于 2023-08-04 21:37:24 发布

ZhangXD_BLOG

最新推荐文章于 2023-08-04 21:37:24 发布

阅读量1.4w

点赞数 10

本文链接：https://blog.csdn.net/u012054869/article/details/87096912

版权

本文详细介绍了如何在微信小程序中实现评论功能，包括在index.wxml中设置提交评论和显示全部评论的结构，以及在index.wxss中定义相应的样式，并在js中处理相关逻辑。

摘要由CSDN通过智能技术生成

index.wxml:

提交评论：

    <!-- 评论 -->
    <!--textarea-->
    <view class="message">
      <form bindsubmit="formSubmit" class='form'>
        <input type="text" name="liuyantext" placeholder='留下你精彩的评论吧' value='{
  {keyValue}}' class="input-style" />
        <button formType="submit" class="btn">发送</button>
        <input type="text" name="nickname" value='{
  {videoid}}' style="display:none;" />
        <input type="text" name="headimg" value='{
  {avatarUrl}}' style="display:none;" />
      </form>
    </view>

显示全部评论：

    <view class='allMessage'>
      <view class="title">
        <text>全部评论</text>
      </view>
      <view class='tab-content'>
        <view class='comment-list'>
        <!-- 提交评论显示 -->
          <view class='comment-item' class="{
  {showOrHidden?'show':'hide'}}" style='width: 100%;height: auto;overflow: hidden;padding: 16px 0;border-bottom: 1px solid #f3f3f5;'>
            <view class='comment-person'>
              <image class='comment-person-avatar' src='{
  {photo2}}'></image>
              <view class='comment-person-info ellipsis'>
                <view class='comment-person-name ellipsi