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

Java大拿 2018-05-03 14:24:29 ⋅ 1044 阅读

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

首先看下效果图


一、页面编写

<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绘制移动报表

小程序实战-幸运大转盘

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

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


关注我们

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


全部评论: 0

    我有话说:

    程序实战-首页(上)

    你也可以用程序编写一个

    程序实战-首页(下)

    程序首页动态数据获取

    程序实战-视频弹幕

    如果你去只是为了看视频就少了一大乐趣,评论区才是最有趣的地方,边看视频边看评论的弹幕是不是更有意思

    程序实战:商品属性联动选择(案例)

    本期的程序实战来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-首页(上)

    上一程序电商实战-入门 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果

    程序电商实战-首页(下)

    上一程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序电商实战-入门

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序实战:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果

    程序实战:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

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

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序实战程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序电商实战-购物车(下)

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据