微信小程序实战篇：实现抖音评论效果

最新推荐文章于 2024-07-31 21:10:04 发布

IT实战联盟Lin

最新推荐文章于 2024-07-31 21:10:04 发布

阅读量8.6k

点赞数 1

分类专栏：互联网技术小程序实战移动开发文章标签：微信小程序抖音效果小程序开发

本文链接：https://blog.csdn.net/zhenghhgz/article/details/80179771

版权

本文介绍如何在微信小程序中实现类似抖音的评论效果。通过页面、样式和数据的编写，教程详细展示了创建该效果的步骤，适合小程序开发者参考学习。

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

IT实战联盟博客：http://blog.100boot.cn

我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个抖音评论效果的小程序

首先看下效果图

一、页面编写

<view>
  <button bindtap='showTalks'>查看评论</button></view><!-- 整个评论区  --><view class='talks-layer' animation='{
  {talksAnimationData}}'>
  <!-- 主要作用是点击后隐藏评论区  -->
  <view class='layer-white-space' bindtap='hideTalks'>
  </view>

  <!-- 评论区  -->
  <view class='talks'>

    <!-- 评论头部  -->
    <view class='talk-header'>
      <view class='talk-count'>{
  {talks.length}} 条评论</view>
      <image src='/image/close.png' class='talk-close' bindtap='hideTalks'></image>
    </view>

    <!-- 评论体  -->
    <scroll-view class='talk-body' scroll-y="true" bindscrolltolower="onScrollLoad">
      <view class='talk-item' wx:for="{
  {talks}}" wx:key="*this">
        <view class='talk-item-left'>
          <image class='talk-item-face' src='{
  {item.avatarUrl}}'></image>
        </view>
        <view class='talk-item-right'>
          <text class='talk-item-nickname'>{
  {item.nickName}}</text>
          <text class='talk-item-content'>{
  {item.content}}</text>
          <text class='talk-item-time'>{
  {item.talkTime}}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 评论底部  -->
    <view class='talk-footer'>
      <input class='talk-input' type='text' placeholder='有爱评论，说点儿好听的~'></input>
    </view>
  </view></view>

二、样式编写

/* pages/subject/subject.wxss */
page {  
    height: 100%;  
    overflow: hidden;
}
/* 框架  */
.talks-layer {  
    position: absolute;  
    bottom: -100%;  
    height: 0;  
    width: 100%;  
    overflow: hidden;  
/* background-color: blue; */
}
.layer-white-space {  
    height: 100%;  
    width: 100%;  
    background-color: #ccc;  
    opacity: .5;  
/* background-color: green; */
}
.talks {  
    position: absolute;  
    height: 900rpx;  
    width: 100%;  
    bottom: 0rpx;  
    background-color: #2f2d2e; 
    border-top-left-radius: 5%;