温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序中怎么实现假数据评论的功能

发布时间:2020-12-21 12:12:25 阅读:174 作者:小新 栏目:移动开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下小程序中怎么实现假数据评论的功能,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

具体直接看代码

wxml:

<view>
<button bindtap='showTalks'>查看评论</button>
</view>
<!-- 整个评论区 -->
<view class='talks-layer' animation='{{talksAnimationData}}'>
<!-- 主要作用是点击后隐藏评论区 -->
<view class='layer-white-space' bindtap='hideTalks'>
</view>
<!-- 评论区 -->
<view class='talks' bindtouchstart='touchStart' bindtouchmove='touchMove'>
<!-- 评论头部 -->
<view class='talk-header'>
<view class='talk-count'>{{talks.length}} 条评论</view>
<image src='../../../images/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'>
<view class='right-left'>
<text class='talk-item-nickname'>{{item.nickName}}</text>
<text class='talk-item-time'>{{item.talkTime}}</text>
</view>
<text class='talk-item-content'>{{item.content}}</text>
</view>
</view>
</scroll-view>
<!-- 评论底部 -->
<view class="cf-bg" catchtap="cemojiCfBg" style="display:{{cfBg ? 'block' : 'none'}}"></view>
<view class=" {{isShow ?'footer_boxmovein' : 'talk-footer'}}">
<view class='footer_box'>
<view class="emoji iconfont icon-emoji" catchtap="emojiShowHide"></view>
<input class='talk-input' type='text' value='{{inputValue}}' bindblur="bindInputBlur" placeholder='有爱评论,说点儿好听的~'></input>
<button class='fabu-input' bindtap='faBu'>发布</button>
</view>
<view wx:if='{{isShow}}' class="emoji-box {{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {{isLoad ? 'no-emoji-move' : ''}}">
<scroll-view scroll-y="true" bindscroll="emojiScroll" style="height:200px">
<block wx:for="{{emojis}}" wx:for-item="e" wx:key="">
<view class="emoji-cell">
<image class="touch-active" bindtap="emojiChoose" src="http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/{{e.emoji}}.png" data-emoji="{{e.char}}" data-oxf="{{e.emoji}}"></image>
</view>
</block>
</scroll-view>
</view>
</view>
</view>
</view>

.wxss

page {
height100%;
overflow: hidden;
}
/* 框架 */
.talks-layer {
position: absolute;
bottom: -100%;
height0;
width100%;
overflow: hidden;
/* background-color: blue; */
}
.layer-white-space {
height100%;
width100%;
background-color#ccc;
opacity0.5;
/* background-color: green; */
}
.talks {
position: absolute;
height900rpx;
width100%;
bottom0rpx;
background-color#2f2d2e;
border-top-left-radius3%;
border-top-right-radius3%;
/* background-color: red; */
}
.talk-header {
width100%;
height70rpx;
padding-top30rpx;
text-align: center;
}
.talk-body {
height700rpx;
}
.talk-footer {
position: absolute;
bottom0rpx;
width100%;
height100rpx;
background-color#151515;
display: flex;
justify-content: space-between;
align-items: center;
padding0 30rpx;
box-sizing: border-box;
}
.footer_boxmovein{
position: absolute;
bottom400rpx;
width100%;
height100rpx;
z-index:1000;
background-color#151515;
display: flex;
justify-content: space-between;
align-items: center;
padding0 30rpx;
box-sizing: border-box;
transition:all 0.6s;
}
.footer_box {
display: flex;
justify-content: space-between;
align-items: center;
width100%;
}
/* 顶部元素 */
.talk-count {
font-size26rpx;
height40rpx;
color#6b696a;
}
.talk-close {
position: absolute;
top30rpx;
right40rpx;
width40rpx;
height40rpx;
}
/* 中部元素 */
.talk-item {
display: flex;
flex-direction: row;
align-items: flex-start;
width100%;
color: white;
}
.talk-item-left {
display: flex;
flex-direction: row;
margin20rpx 30rpx;
} 
.talk-item-face {
width80rpx;
height80rpx;
border-radius50%;
}
.talk-item-right {
width100%;
border-bottom: solid 1rpx #6a6869;
margin-right30rpx;
/* margin-bottom: 30rpx; */
padding-bottom20rpx;
}
.right-left {
display: flex;
justify-content: space-between;
align-items: center;
margin10px 0;
} 
.talk-item-nickname {
font-size28rpx;
color#aaa8a9;
}
.talk-item-time {
font-size24rpx;
color#6a6869;
}
.talk-item-content {
display: block;
font-size30rpx;
margin-right30rpx;
width92%;
white-space: pre-line;
word-break: break-all;
word-wrap: break-word;;
}
/* 底部元素 */
.talk-input {
width100%;
font-size30rpx;
padding20rpx 0;
padding-left30rpx;
/* box-sizing: border-box; */
color: white;
border-top-left-radius5%;
border-top-right-radius5%;
}
.fabu-input {
background: red;
font-size26rpx;
color#fff;
width127rpx;
height60rpx;
line-height60rpx;
text-align: center;
border-radius30rpx;
padding0;
}
.emoji {
background-color#fff;
width30px;
height30px;
text-align: center;
padding-top2px;
box-sizing: border-box;
font-size20px;
}
.emoji-box {
position: absolute;
bottom:-390rpx;
left:0rpx;
height200px;
padding5px 16rpx;
box-sizing: border-box;
background:#000;
} 
.emoji-cell {
width9.09%;
height33px;
display: inline-block;
} 
.emoji-cell image {
width23px;
height23px;
padding5px;
border-radius3px;
}
.emoji-move-in {
-webkit-animation: emoji-move-in 0.3s forwards;
animation: emoji-move-in 0.3s forwards;
}
.emoji-move-out {
-webkit-animation: emoji-move-out 0.3s forwards;
animation: emoji-move-out 0.3s forwards;
} 
.no-emoji-move {
-webkit-animation: none;
animation: none;
} 
@-webkit-keyframes emoji-move-in {
0% {
margin-bottom: -200px;
}
100% {
margin-bottom0;
}
}
@keyframes emoji-move-in {
0% {
margin-bottom: -200px;
}
100% {
margin-bottom0;
}
}
@-webkit-keyframes emoji-move-out {
0% {
margin-bottom0;
}
100% {
margin-bottom: -200px;
}
}
@keyframes emoji-move-out {
0% {
margin-bottom0;
}
100% {
margin-bottom: -200px;
}
}
@-webkit-keyframes pd-left-move {
0% {
padding-left5px;
}
100% {
padding-left15px;
}
}
@keyframes pd-left-move {
0% {
padding-left5px;
} 
100% {
padding-left15px;
}
}
.cf-bg {
position: fixed;
top0;
left0;
bottom0;
right0;
background-color: transparent;
z-index99;
}

.js

Page({
data: {
talks: [],
touchStart0,
inputValue'',
inputBiaoqing'',
faces: ['https://cache.yisu.com/upload/information/20201208/261/14065.jpg''https://cache.yisu.com/upload/information/20201208/261/14066.jpg''https://cache.yisu.com/upload/information/20201208/261/14067.jpg'],
names: ['贝贝''晶晶''欢欢''妮妮'],
isShowfalse, //控制emoji表情是否显示
isLoadtrue, //解决初试加载时emoji动画执行一次
cfBgfalse,
emojiChar"☺-

看完了这篇文章,相信你对小程序中怎么实现假数据评论的功能有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×