Heim >WeChat-Applet >Mini-Programmentwicklung >So implementieren Sie die Kommentarfunktion für gefälschte Daten im WeChat-Miniprogramm (vollständiger Code)

So implementieren Sie die Kommentarfunktion für gefälschte Daten im WeChat-Miniprogramm (vollständiger Code)

不言
不言Original
2018-09-06 11:12:416766Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Fake-Data-Kommentarfunktion (vollständiger Code) im WeChat-Applet. Ich hoffe, dass er für Sie hilfreich ist. .

Sehen Sie sich den Code direkt an

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>

.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;
}

.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: "☺-

Verwandte Empfehlungen:

Einige Optimierungsmethoden für die Besucherkommentarfunktion in WordPress_PHP

Javascript zur Implementierung der Fünf-Sterne-Bewertungsfunktion_Javascript-Fähigkeiten

Basierend auf js, wie man Freunde auf WeChat sendet und an Moments und Weibo_Javascript-Fähigkeiten teilt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kommentarfunktion für gefälschte Daten im WeChat-Miniprogramm (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn