小潘杂谈

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

字号+ 作者:admin 来源:seo博客 2020-09-07 11:30 我要评论( )

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

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

具体直接看代码

wxml:<view><button bindtap='showTalks'>查看评论</button></view><!-- 整个评论区 --><view>.wxsspage {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;}.jsPage({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, //解决初试加载时emoji动画执行一次cfBg: false,emojiChar: "&:-相关推荐:

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

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

基于js实现微信发送好友如何分享到朋友圈、微博_javascript技巧以上就是微信小程序中如何实现假数据评论的功能(完整代码)的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读