微信小程式中如何實現假資料評論的功能（完整程式碼）-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式中如何實現假資料評論的功能（完整程式碼）

不言

Sep 06, 2018 am 11:12 AM

emoji微信小程式

這篇文章帶給大家的內容是關於微信小程式中如何實現假數據評論的功能（完整程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

具體直接看程式碼

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

熱AI工具

熱工具

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

微信小程式中如何實現假資料評論的功能（完整程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

VSCode Windows 64位元下載

EditPlus 中文破解版

SublimeText3 Linux新版

Dreamweaver CS6

DVWA

熱門話題

微信小程式中如何實現假資料評論的功能（完整程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

VSCode Windows 64位元 下載

EditPlus 中文破解版

SublimeText3 Linux新版

Dreamweaver CS6

DVWA

熱門話題

VSCode Windows 64位元下載