微信小程序实现简单评论功能微信小程序实现简单评论功能
主要为大家详细介绍了微信小程序实现简单评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现评论功能的具体代码，供大家参考，具体内容如下
具体直接看代码
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 {
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 {
weixin_38602982
- 粉丝: 7
- 资源: 977
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0