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

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

首先看下效果图

一、页面编写

<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%;  
    border-top-right-radius: 5%;  
    /* background-color: red; */
}
.talk-header {  
    width: 100%;  
    height: 70rpx;  
    padding-top: 
    30rpx;  
    text-align: center;
}
.talk-body {  
    height: 700rpx;
}
.talk-footer {  
    position: absolute;  
    bottom: 0rpx;  
    width: 100%;  
    height: 100rpx;  
    background-color: #151515;
}
/* 顶部元素  */
.talk-count {  
    font-size: 0.8rem;  
    height: 40rpx;  
    color: #6b696a;
}
.talk-close {  
    position: absolute;  
    top: 40rpx;  
    right: 40rpx;  
    width: 40rpx;  
    height: 40rpx;
}
/* 中部元素  */
.talk-item {  
    display: flex;  
    flex-direction: row;  
    align-items: flex-start;  
    width: 100%;  
    color: white;
}
.talk-item-left {  
    display: flex;  
    flex-direction: row;  
    margin: 20rpx 30rpx;
}
.talk-item-face {  
    width: 80rpx;  
    height: 80rpx;  
    border-radius: 50%;
}
.talk-item-right {  
    width: 100%;  
    border-bottom: solid 1rpx #6a6869;  
    margin-right: 30rpx;  
    margin-bottom: 30rpx;
}
.talk-item-nickname {  
    font-size: 0.7rem;  
    color: #aaa8a9;  
    margin-top: 20rpx;  
    margin-bottom: 10rpx;
}
.talk-item-content {  
    display: block;  
    margin-right: 30rpx;  
    width: 100%;  
    white-space: pre-line;
}
.talk-item-time {  
    font-size: 0.7rem;  
    color: #6a6869;  
    margin-bottom: 20rpx;
}
/* 底部元素  */

.talk-input {  
    width: 100%;  
    padding: 20rpx 40rpx;  
    color: white;  
    border-top-left-radius: 5%;  
    border-top-right-radius: 5%;
}

三、数据编写

Page({  
    data: {    
        talks: []
      },  
    onLoad: function () {

  },  
    onReady: function () {    // 评论弹出层动画创建
    this.animation = wx.createAnimation({      
        duration: 400, // 整个动画过程花费的时间，单位为毫秒
        timingFunction: "ease", // 动画的类型
        delay: 0 // 动画延迟参数
    })
  },  
    showTalks: function () {    
    // 加载数据
    this.loadTalks();    // 设置动画内容为：使用绝对定位显示区域，高度变为100%
    this.animation.bottom("0rpx").height("100%").step()    
    this.setData({      
        talksAnimationData: this.animation.export()
    })
  },  
    hideTalks: function () {    // 设置动画内容为：使用绝对定位隐藏整个区域，高度变为0
    this.animation.bottom("-100%").height("0rpx").step()    
    this.setData({      
        talks: [],      
        talksAnimationData: this.animation.export()
    })
  },  // 加载数据
  loadTalks: function () {    // 随机产生一些评论
    wx.showNavigationBarLoading();    
    var that = this;    
    var talks = [];    
    var faces = ['/image/face1.png', '/image/face2.png', '/image/face3.png'];    
    var names = ['贝贝', '晶晶', '欢欢', '妮妮'];    
    var contents = ['IT实战联盟很不错的', '是的', '楼上说的对'];
    talks = talks.concat(this.data.talks);    // 随机产生10条评论
    for (var i = 0; i < 10; i++) {
      talks.push({        
        avatarUrl: faces[Math.floor(Math.random() * faces.length)],        
        nickName: names[Math.floor(Math.random() * names.length)],        
        content: contents[Math.floor(Math.random() * contents.length)],        
        talkTime: '刚刚'
      });
    }    
        this.setData({      
            talks: talks,      
            talksAnimationData: that.animation.export()
        })
    wx.hideNavigationBarLoading();
  },  
onScrollLoad: function () {    // 加载新的数据
    this.loadTalks();
  },
})

就这么简单，你学会了吗？

更多精彩内容

微信小程序电商实战-入门篇

微信小程序电商实战-首页（上）

微信小程序电商实战-首页（下）

微信小程序电商实战-商品详情（上）

微信小程序电商实战-商品详情加入购物车（下）

微信小程序电商实战-商品列表流式布局

微信小程序实战篇：基于wxcharts.js绘制移动报表

小程序实战-幸运大转盘

微信小程序-Image的widthFix属性和rpm尺寸的使用

微信小程序实战篇：小程序之页面数据传递

关注我们

如果需要源码可以关注“IT实战联盟”公*众*号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~