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

素颜马尾好姑娘i 2022-05-26 13:39 394阅读 0赞

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

![20180503143635138][]

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

### 首先看下效果图 ###

![464b62067ae9cefc80e3fd3011d2e433.gif][]

### 一、页面编写 ###

<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();
      },
    })

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

更多精彩内容

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

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

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

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

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

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

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

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

[小程序实战-幸运大转盘][- 6]

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

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

关注我们

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

[http_blog.100boot.cn]: http://blog.100boot.cn/
[20180503143635138]: /images/20220526/c1b966579d8740a4b19cb5b3e064a251.png
[464b62067ae9cefc80e3fd3011d2e433.gif]: /images/20220526/189acb86fbf34fd8954e58320aef6b18.png
[-]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483670&idx=1&sn=b9d5aba9a9fbc554c73e75fb96baa9c7&chksm=fc4df357cb3a7a41c1dad9b3958559b94ede901977f75bd190c1a31f80521e63762f1c9a0c29&mpshare=1&scene=21&srcid=0328MjVPuaFzLYNUztIrcguF&key=e2f055305b351fc9ec2e28f5b88e7fa86659825200c89a0f765bab65bfc1b99b6608508ca4167aa552d84c30f8f7b5d5874d293059e263a1c5d648019d3032d0047fe8ee8ff5ac9695166e3ff6fdd544&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483739&idx=1&sn=513983eb9498045fc9596718a346ca89&chksm=fc4df31acb3a7a0ce587d2a1efb5843141db9c0a3cef517cadadeb8ddc7ee87965c68a3f92bb&mpshare=1&scene=21&srcid=0328zMOVse9XdMVg5bIcVC7I&key=e2f055305b351fc97b608d5c03843c1805b3ec5a4e7a2c52dcb8c09c4b25728a6c90eeb5b2f3a76f274c4ffe56a31dcbec0b88ee48a301dee3c28ba47308909905cc4ce2ed141fd1fd1c7aaec6674c19&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483758&idx=1&sn=dff49ea53dbd16a7f4e4b6ae6d6e0632&chksm=fc4df32fcb3a7a39194f81a9b02a75ce4085027aaf0c4cb928bd51356cb9f573d21626e288de&mpshare=1&scene=21&srcid=03286fHG8MV00HQsP1HjM7LA&key=505f8e205eea7c2154a32806e67b807ac24b0cfb6521db9cb828a4ebcc5a5a0d19beed72d12a3ed2d1ee1fb3b840e8d347cccb3cf93aedcac94185ccc0c525c2f5e6faa1f0140cdd8ef4114f3f3c567b&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 3]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483874&idx=1&sn=dba01d63f4a262c07e110d4e40abdde5&chksm=fc4df3a3cb3a7ab57c85f171095d737a2db974f56aaec6d639b84b5d767cef94248787b7b6d6&mpshare=1&scene=21&srcid=0328p7C4mIHTp22VumVmpUzQ&key=505f8e205eea7c21ade5b4fae43d72fd7a1f64d0ffd73c9080bb5265c25d606f36f3b23a85715fe0f5406780fea08718819d0d98e75f496b26deefb258d64bf0d76007f690261d93949eeb650865c4be&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 4]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484276&idx=1&sn=1d5c3e166a2fefd5fb596d24093958d8&chksm=fc4df135cb3a782353a65dde4072c5de4303837577b2827f49bbed8132137894bcc232e37676&mpshare=1&scene=21&srcid=0413r4WFE7Ga0QI33lNxAaBi&key=a26753775bc5a4cc558446a192cedd125fd028a45003c73653de57832e94af26dab25d0c1806fb8ed6151ebd112955de29d204c64f99aba90d5e454cad5bc962ffb0f7ff3aedba819ccf27f03e9b0281&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=OCUECpDe3wAhOPu6kW2De6oWGQgsS1QZ6xXWbN1sKPRcagqnfallu65Uq1v2MsNC#wechat_redirect
[- 5]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484027&idx=1&sn=54a372e6d890b2aadb74a7f6be8e31c0&chksm=fc4df03acb3a792c80423d9b5fc9a39d35927e79f017b05567ba42c75b993d008afa4d8eea78&mpshare=1&scene=21&srcid=0328djLj7vwBSxj8WUuatQaC&key=505f8e205eea7c2128284fd633112e66febce70ade0fb9efc4f602257d413b81a908a95d1a6b529b54918902eb6e0aeda4a5f5e1deb13daf0e172cbaf6beea575e9d93369835b10ebf8f3e397dcd062c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[wxcharts.js]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484175&idx=1&sn=7afedd9892b5e29b824aaf82a4986309&chksm=fc4df14ecb3a7858707302bc5c764757d85a5e10bd6ab84cd14e55f85410fa677ccd5cbf11b2&mpshare=1&scene=21&srcid=0328fFYTH687PfpQT9Fx5Fzk&key=50484b766617eb01ead846871bd8e696bea4f61708f1f3b9c2fa723c6db2e95fc9e7034d01d2295bdae5beef06b11d561abb39bb3e2f418bb94818b355eba5e886fa5d06ef0f03bbcd357db4d6f5603f&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 6]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483907&idx=1&sn=15750f0ad2c43e1f39d278ccb574e69c&chksm=fc4df042cb3a79549912c1acf1946f27e6e2df4e1565209e1f5bd001b2ef4f43ab56a3332a0e&mpshare=1&scene=21&srcid=0409F13sZCHWhMxxsVNadA0p&key=505f8e205eea7c2106f70fb32919a74a1a81257aed4fe1be8ca8d8e0c571687b8239ff82e3d8e809a487c2cf2a5cd0db57b4ea11a418e69fd0bb357c2349951cd6fca03cf100fe1614139e1103e6395c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=xATsQx4T2CygyoAw3rXIOQfLMbuSjLl2m235IRGEzZmoXSjKXv6ZYiRkmp2qYN%20o#wechat_redirect
[-Image_widthFix_rpm]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484050&idx=1&sn=cb47932cb4e5c7e76ecb0a06bf980a41&chksm=fc4df0d3cb3a79c544d4b5de4158f172a8ed40a4d88ccd7cd3051f4ed8b2998c60a6dd983491&mpshare=1&scene=21&srcid=0328rKhgcKBHBzwZSQXgdCyO&key=c9369063c8731b82cc93062840543ae058ea2760d12f0cd19e26accf017f3017d9fce9313a3cbd08aa3bef766ad57d45d840f4e23e25550e418fe8b73c30683200045a3597c1c164168e7aa2f0013693&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484297&idx=1&sn=f4058b62cd422eddb986960c51d98dca&chksm=fc4df1c8cb3a78deaac6d58d0434e9a70fae027647793802f5a78d2238843351fc5ea955d02a&mpshare=1&scene=21&srcid=0503y4ZkeSJaTiSj77WnZg1M&key=b67b626bde1fc6dee989bd97dda04724b4ac5e4cfd4a5916465ff5950fe4bea3d1ad6f00eea5bdd8f859a37c1c0dff78b751d6845a56a15de72168bae1384e40933c99d6e5a5b922470fa6d53e63ac70&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BBwAoQ210abmQls8Q0LgORJO9tAuXmpSkXF5uTnOdLhGkHmTND2c0AwSQEg5ZwDg#wechat_redirect