masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > applet WeChat > Pembangunan program mini > 微信小程序中如何实现假数据评论的功能（完整代码）

微信小程序中如何实现假数据评论的功能（完整代码）

不言
Lepaskan： 2018-09-06 11:12:41
asal
6768 orang telah melayarinya

本篇文章给大家带来的内容是关于微信小程序中如何实现假数据评论的功能（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体直接看代码

wxml：

<view>
<button bindtap=&#39;showTalks&#39;>查看评论</button>
</view>
<!-- 整个评论区 -->
<view class=&#39;talks-layer&#39; animation=&#39;{{talksAnimationData}}&#39;>
<!-- 主要作用是点击后隐藏评论区 -->
<view class=&#39;layer-white-space&#39; bindtap=&#39;hideTalks&#39;>
</view>
<!-- 评论区 -->
<view class=&#39;talks&#39; bindtouchstart=&#39;touchStart&#39; bindtouchmove=&#39;touchMove&#39;>
<!-- 评论头部 -->
<view class=&#39;talk-header&#39;>
<view class=&#39;talk-count&#39;>{{talks.length}} 条评论</view>
<image src=&#39;../../../images/close.png&#39; class=&#39;talk-close&#39; bindtap=&#39;hideTalks&#39;></image>
</view>
<!-- 评论体 -->
<scroll-view class=&#39;talk-body&#39; scroll-y="true" bindscrolltolower="onScrollLoad">
<view class=&#39;talk-item&#39; wx:for="{{talks}}" wx:key="*this">
<view class=&#39;talk-item-left&#39;>
<image class=&#39;talk-item-face&#39; src=&#39;{{item.avatarUrl}}&#39;></image>
</view>
<view class=&#39;talk-item-right&#39;>
<view class=&#39;right-left&#39;>
<text class=&#39;talk-item-nickname&#39;>{{item.nickName}}</text>
<text class=&#39;talk-item-time&#39;>{{item.talkTime}}</text>
</view>
<text class=&#39;talk-item-content&#39;>{{item.content}}</text>
</view>
</view>
</scroll-view>
<!-- 评论底部 -->
<view class="cf-bg" catchtap="cemojiCfBg" style="display:{{cfBg ? &#39;block&#39; : &#39;none&#39;}}"></view>
<view class=" {{isShow ?&#39;footer_boxmovein&#39; : &#39;talk-footer&#39;}}">
<view class=&#39;footer_box&#39;>
<view class="emoji iconfont icon-emoji" catchtap="emojiShowHide"></view>
<input class=&#39;talk-input&#39; type=&#39;text&#39; value=&#39;{{inputValue}}&#39; bindblur="bindInputBlur" placeholder=&#39;有爱评论，说点儿好听的~&#39;></input>
<button class=&#39;fabu-input&#39; bindtap=&#39;faBu&#39;>发布</button>
</view>
<view wx:if=&#39;{{isShow}}&#39; class="emoji-box {{isShow ? &#39;emoji-move-in&#39; : &#39;emoji-move-out&#39;}} {{isLoad ? &#39;no-emoji-move&#39; : &#39;&#39;}}">
<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>
Salin selepas log masuk

.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: 0.5;
/* background-color: green; */
}
.talks {
position: absolute;
height: 900rpx;
width: 100%;
bottom: 0rpx;
background-color: #2f2d2e;
border-top-left-radius: 3%;
border-top-right-radius: 3%;
/* 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;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
}
.footer_boxmovein{
position: absolute;
bottom: 400rpx;
width: 100%;
height: 100rpx;
z-index:1000;
background-color: #151515;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
transition:all 0.6s;
}
.footer_box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* 顶部元素 */
.talk-count {
font-size: 26rpx;
height: 40rpx;
color: #6b696a;
}
.talk-close {
position: absolute;
top: 30rpx;
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; */
padding-bottom: 20rpx;
}
.right-left {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
} 
.talk-item-nickname {
font-size: 28rpx;
color: #aaa8a9;
}
.talk-item-time {
font-size: 24rpx;
color: #6a6869;
}
.talk-item-content {
display: block;
font-size: 30rpx;
margin-right: 30rpx;
width: 92%;
white-space: pre-line;
word-break: break-all;
word-wrap: break-word；;
}
/* 底部元素 */
.talk-input {
width: 100%;
font-size: 30rpx;
padding: 20rpx 0;
padding-left: 30rpx;
/* box-sizing: border-box; */
color: white;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
}
.fabu-input {
background: red;
font-size: 26rpx;
color: #fff;
width: 127rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 30rpx;
padding: 0;
}
.emoji {
background-color: #fff;
width: 30px;
height: 30px;
text-align: center;
padding-top: 2px;
box-sizing: border-box;
font-size: 20px;
}
.emoji-box {
position: absolute;
bottom:-390rpx;
left:0rpx;
height: 200px;
padding: 5px 16rpx;
box-sizing: border-box;
background:#000;
} 
.emoji-cell {
width: 9.09%;
height: 33px;
display: inline-block;
} 
.emoji-cell image {
width: 23px;
height: 23px;
padding: 5px;
border-radius: 3px;
}
.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-bottom: 0;
}
}
@keyframes emoji-move-in {
0% {
margin-bottom: -200px;
}
100% {
margin-bottom: 0;
}
}
@-webkit-keyframes emoji-move-out {
0% {
margin-bottom: 0;
}
100% {
margin-bottom: -200px;
}
}
@keyframes emoji-move-out {
0% {
margin-bottom: 0;
}
100% {
margin-bottom: -200px;
}
}
@-webkit-keyframes pd-left-move {
0% {
padding-left: 5px;
}
100% {
padding-left: 15px;
}
}
@keyframes pd-left-move {
0% {
padding-left: 5px;
} 
100% {
padding-left: 15px;
}
}
.cf-bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
z-index: 99;
}
Salin selepas log masuk

.js

Page({
data: {
talks: [],
touchStart: 0,
inputValue: &#39;&#39;,
inputBiaoqing: &#39;&#39;,
faces: [&#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304160&di=0cc9d01a4ae2deca5634c3136d5c01f6&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612202753_u4nG5.jpeg&#39;, &#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304159&di=da2c1c4e868ee95f3cd65ffc6e24a456&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201505%2F01%2F20150501083603_yuTQc.jpeg&#39;, &#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535727304156&di=7d46a1482a8e798a70d8d52320285b02&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7b%2Ff9%2F01%2F7bf901db9091dff00a20d474c83afc45.jpg&#39;],
names: [&#39;贝贝&#39;, &#39;晶晶&#39;, &#39;欢欢&#39;, &#39;妮妮&#39;],
isShow: false, //控制emoji表情是否显示
isLoad: true, //解决初试加载时emoji动画执行一次
cfBg: false,
emojiChar: "☺-
Salin selepas log masuk

相关推荐：

WordPress中对访客评论功能的一些优化方法_PHP

javascript实现五星评分功能_javascript技巧

基于js实现微信发送好友如何分享到朋友圈、微博_javascript技巧

Atas ialah kandungan terperinci 微信小程序中如何实现假数据评论的功能（完整代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
emoji 微信小程序
sumber：php.cn
Artikel sebelumnya：微信小程序中实现上传视频的开发代码 Artikel seterusnya：微信小程序中template模块的使用方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Apakah amalan terbaik untuk memaparkan maklumat versi dalam aplikasi web? Saya sedang membangunkan aplikasi web. Apakah amalan terbaik untuk memaparkan maklumat ver...
daripada 2024-04-06 19:13:16
0
2
476
Terdapat ralat dengan arahan npx create-react-app, bagaimana cara saya membetulkannya? Saya telah cuba mencipta aplikasi React baharu menggunakan arahan 'npxcreate-react-app' te...
daripada 2024-04-05 14:42:18
0
1
3511
Bagaimana untuk mengalih keluar ruang di bawah setiap baris pada papan Tic-Tac-Toe dalam Next.js menggunakan CSS? Mengapakah terdapat ruang di bawah setiap baris? (CSS) Saya cuba membuat apl tic-tac-toe N...
daripada 2024-04-05 11:39:02
0
1
1431
Cara untuk memberikan data melalui DOM dan bukannya melalui jadual Saya mempunyai soalan tentang aplikasi yang saya buat, saya menggunakan pangkalan data Ora...
daripada 2024-04-04 18:17:27
0
1
3567
Proses kebenaran selepas log masuk pengguna Google SHOPIFY Selepas log masuk ke Google, saya tidak dapat mencari maklumat tentang akaun dibenarkan pe...
daripada 2024-04-04 09:40:59
0
1
310
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan