微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能
更新時(shí)間：2018年11月28日 10:07:15 作者：想要飛翔的小豬
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)評(píng)論功能的具體代碼，供大家參考，具體內(nèi)容如下
具體直接看代碼
wxml:
<view>
<button bindtap='showTalks'>查看評(píng)論</button>
</view>
<!-- 整個(gè)評(píng)論區(qū) -->
<view class='talks-layer' animation='{{talksAnimationData}}'>
<!-- 主要作用是點(diǎn)擊后隱藏評(píng)論區(qū) -->
<view class='layer-white-space' bindtap='hideTalks'>
</view>
<!-- 評(píng)論區(qū) -->
<view class='talks' bindtouchstart='touchStart' bindtouchmove='touchMove'>
<!-- 評(píng)論頭部 -->
<view class='talk-header'>
<view class='talk-count'>{{talks.length}} 條評(píng)論</view>
<image src='../../../images/close.png' class='talk-close' bindtap='hideTalks'></image>
</view>
<!-- 評(píng)論體 -->
<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>
<!-- 評(píng)論底部 -->
<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='有愛(ài)評(píng)論，說(shuō)點(diǎn)兒好聽(tīng)的~'></input>
<button class='fabu-input' bindtap='faBu'>發(fā)布</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 {
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: '',
inputBiaoqing: '',
faces: ['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', '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', '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'],
names: ['貝貝', '晶晶', '歡歡', '妮妮'],
isShow: false, //控制emoji表情是否顯示
isLoad: true, //解決初試加載時(shí)emoji動(dòng)畫執(zhí)行一次
cfBg: false,
emojiChar: "☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲",
//0x1f---
emoji: [
"60a", "60b", "60c", "60d", "60f",
"61b", "61d", "61e", "61f",
"62a", "62c", "62e",
"602", "603", "605", "606", "608",
"612", "613", "614", "615", "616", "618", "619", "620", "621", "623", "624", "625", "627", "629", "633", "635", "637",
"63a", "63b", "63c", "63d", "63e", "63f",
"64a", "64b", "64f", "681",
"68a", "68b", "68c",
"344", "345", "346", "347", "348", "349", "351", "352", "353",
"414", "415", "416",
"466", "467", "468", "469", "470", "471", "472", "473",
"483", "484", "485", "486", "487", "490", "491", "493", "498", "6b4"
],
emojis: [], //qq、微信原始表情
alipayEmoji: [], //支付寶表情
},
onLoad: function() {
var em = {},
that = this,
emChar = that.data.emojiChar.split("-");
var emojis = []
that.data.emoji.forEach(function(v, i) {
em = {
char: emChar[i],
emoji: "0x1f" + v
};
emojis.push(em)
});
that.setData({
emojis: emojis
})
},
//解決滑動(dòng)穿透問(wèn)題
emojiScroll: function(e) {
console.log(e)
},
//點(diǎn)擊表情顯示隱藏表情盒子
emojiShowHide: function() {
this.setData({
isShow: !this.data.isShow,
isLoad: false,
cfBg: !this.data.false
})
},
//表情選擇
emojiChoose: function(e) {
console.log(e)
//當(dāng)前輸入內(nèi)容和表情合并
// let value = e.currentTarget.dataset.emoji;
this.data.inputBiaoqing += e.currentTarget.dataset.emoji;
console.log(this.data.inputBiaoqing)
this.setData({
inputValue: this.data.inputBiaoqing
})
},
//點(diǎn)擊emoji背景遮罩隱藏emoji盒子
cemojiCfBg: function() {
console.log('womenlai')
this.setData({
isShow: false,
cfBg: false
})
},
onReady: function() {
// 評(píng)論彈出層動(dòng)畫創(chuàng)建
this.animation = wx.createAnimation({
duration: 400, // 整個(gè)動(dòng)畫過(guò)程花費(fèi)的時(shí)間，單位為毫秒
timingFunction: "ease", // 動(dòng)畫的類型
delay: 0 // 動(dòng)畫延遲參數(shù)
})
},
showTalks: function() {
// 加載數(shù)據(jù)
this.loadTalks();
// 設(shè)置動(dòng)畫內(nèi)容為：使用絕對(duì)定位顯示區(qū)域，高度變?yōu)?00%
this.animation.bottom("0rpx").height("100%").step()
this.setData({
talksAnimationData: this.animation.export()
})
},
hideTalks: function() {
// 設(shè)置動(dòng)畫內(nèi)容為：使用絕對(duì)定位隱藏整個(gè)區(qū)域，高度變?yōu)?
this.animation.bottom("-100%").height("0rpx").step()
this.setData({
talks: [],
talksAnimationData: this.animation.export()
})
},
// 加載數(shù)據(jù)
loadTalks: function() {
// 隨機(jī)產(chǎn)生一些評(píng)論
wx.showNavigationBarLoading();
let that = this;
let talks = [];
let faces = ['https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535701703&di=bfde939cc559b0f8edcbfd1adb6e667d&src=http://img5q.duitang.com/uploads/item/201505/15/20150515205520_iWF2U.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535711703167&di=ce7a08b889137a70f7b4568e13df0e4d&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F6f061d950a7b02088811236964d9f2d3562cc85a.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535711703162&di=8ec21b75cb44de532f8be29300f075b0&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150710%2F0005018347189196_b.jpg',
];
let names = ['佳佳', '晶晶', '歡歡', '妮妮', '娜娜', '鍋鍋'];
let contents = ['為什么你總是對(duì)我不理不睬呢', '干嘛老是不見(jiàn)你了', '我們都有字節(jié)的夢(mèng)想', '你有什么資格不努力呢'];
let talktime = '剛剛';
console.log(talktime)
talks = talks.concat(that.data.talks);
// 隨機(jī)產(chǎn)生10條評(píng)論
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: talktime
});
}
this.setData({
talks: talks,
talksAnimationData: that.animation.export()
})
wx.hideNavigationBarLoading();
},
onScrollLoad: function() {
// 加載新的數(shù)據(jù)
this.loadTalks();
},
//下拉評(píng)論框隱藏
touchStart: function(e) {
let touchStart = e.touches[0].clientY;
this.setData({
touchStart,
})
},
touchMove: function(e) {
// console.log(this.data.touchStart)
let touchLength = e.touches[0].clientY - this.data.touchStart;
console.log(touchLength - 100)
if (touchLength > 100) {
this.animation.bottom("-100%").height("0rpx").step()
this.setData({
talks: [],
talksAnimationData: this.animation.export(),
})
}
},
//輸入框失去焦點(diǎn)時(shí)觸發(fā)
bindInputBlur: function(e) {
console.log(e)
console.log(this.data.inputBiaoqing)
this.data.inputValue = e.detail.value + this.data.inputBiaoqing;
},
//點(diǎn)擊發(fā)布，發(fā)布評(píng)論
faBu: function() {
let that = this;
this.data.talks.unshift({
avatarUrl: this.data.faces[Math.floor(Math.random() * this.data.faces.length)],
nickName: this.data.names[Math.floor(Math.random() * this.data.names.length)],
content: this.data.inputValue,
talkTime: '剛剛'
})
that.data.inputValue = '';
that.setData({
talks: that.data.talks,
inputValue: that.data.inputValue,
talksAnimationData: that.animation.export()
})
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
漂亮的widgets，支持換膚和后期開(kāi)發(fā)新皮膚
漂亮的widgets，支持換膚和后期開(kāi)發(fā)新皮膚...2007-04-04
JS使用for in有序獲取對(duì)象數(shù)據(jù)
這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript原型鏈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2023-04-04
three.js中g(shù)sap動(dòng)畫庫(kù)實(shí)現(xiàn)物體的動(dòng)畫
本文主要介紹了three.js中g(shù)sap動(dòng)畫庫(kù)實(shí)現(xiàn)物體的動(dòng)畫，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
javascript實(shí)現(xiàn)自動(dòng)填寫表單實(shí)例簡(jiǎn)析
這篇文章主要介紹了javascript實(shí)現(xiàn)自動(dòng)填寫表單的方法,以一個(gè)簡(jiǎn)單實(shí)例形式分析了JavaScript結(jié)合瀏覽器設(shè)置實(shí)現(xiàn)自動(dòng)保存表單的相關(guān)技巧,需要的朋友可以參考下2015-12-12
javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)
這篇文章給大家介紹了javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2007-11-11
一起來(lái)學(xué)習(xí)TypeScript的類型
這篇文章主要為大家詳細(xì)介紹了TypeScript的類型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
javascript的事件觸發(fā)器介紹的實(shí)現(xiàn)
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實(shí)現(xiàn),本文所指觸發(fā)器是用程序來(lái)觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下2014-06-06
JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)
本篇文章主要是對(duì)JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02