微信小程序仿朋友圈，实现点赞和评论功能
本文 主要讲 大概的实现，思路。有不同想法的可以私信我。
首先的话是准备工作
布局
自己模拟的后台传送数据
commandArraylist:[{userUrl:'/assets/logo/jiatui-logo.jpg',articleUrl:'/assets/images/simple.jpg',username:'心动云',userpression:'公司',articleTitle:'2019，深圳开荒牛的TO B拓荒路',data:'昨天',praiseFlag:false,lovePointUser:'稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',commandUserList:[{name:'zero',text:'厉害'},{name: '华仔',text: '不错'},{name: '方知',text: 'hello'},{name: '吴氏生飞 地产老猫',text: '好产品'},]},{userUrl: '/assets/logo/jiatui-logo.jpg',articleUrl: '/assets/images/simple.jpg',username: '加推科技',userpression: '公司',articleTitle: '2019，深圳开荒牛的TO B拓荒路',data: '昨天',praiseFlag: false,lovePointUser: '稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',commandUserList: [{name: 'zero',text: '厉害'},{name: '华仔',text: '不错'},{name: '方知',text: 'hello'},{name: '吴氏生飞 地产老猫',text: '好产品'},]},{userUrl: '/assets/logo/jiatui-logo.jpg',articleUrl: '/assets/images/simple.jpg',username: '加推科技',userpression: '公司',articleTitle: '2019，深圳开荒牛的TO B拓荒路',data: '昨天',praiseFlag: false,lovePointUser: '稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',commandUserList: [{name: 'zero',text: '厉害'},{name: '华仔',text: '不错'},{name: '方知',text: 'hello'},{name: '吴氏生飞 地产老猫',text: '好产品'},]},]还有就是在 每个评论上面加一个自定义数据，我是data-current=index，来标识每个不同的动态分享，不然一点赞，就所有动态都点赞了，就不好了。在data里面定义一个commandTab,接收这个自定义值，留着后面大用
第一：我们先做评论和点赞框带动画的显示事件commandClick（点完显示赞，和评论的那个横框框，名字取得 随意吧。。）
first:获取这一条动态的唯一标识符，就是前面说的dataset的数据，然后，吧值赋给commandTab,就能做到指定显示，
<view class="list-command-btn" wx:if='{{commandTab == index}}' animation=" {{animationData}}"> //这里的 commandTab == index 控制指定的评论和点赞区的显示 <view class="btn-command" bindtap="praiseThumbsClick" ><image src="/assets/logo/love.png"></image><text hidden="{{item.praiseFlag}}">赞</text><text hidden="{{!item.praiseFlag}}">取消</text></view><text>|</text><view class="btn-command" bindtap="inputCommandClick"><image src="/assets/logo/consultation.png"></image><text>评论</text></view></view>second：
在 这个 过程中加上动画，第一次点击显示，再点隐藏，再点显示，再点隐藏。
我的思路呢就是，data加一个commandHiddenFlag 标识框框的显示 还是隐藏，
我的主要想法，给commandTab初始值99，点击的时候，判断commandTab和current是否相等，当然是不相等 我们commandTab初始值设的是99
如果不相等：commandHiddenFlag 的值变成false，评论区由隐藏——>显示，做一个出现的动画，吧current赋值给 commandTab,标识我们现在评论区已经显示了，
如果相等：current==commandTab说明是刚才点击过了，评论区由显示—>隐藏，做一个慢慢退厂的动画，
关键点：每个退厂之后，都要把commandTab重新赋值为99（设一个定时器200毫秒）,表示一次结束，不然current==commandTab就一直相等了，就没有出现动画了
然后，我们再来做点赞功能，
点赞就比较简单了，根据刚才的commandTab找到 指定动态，在json数组里面的位置，吧里面的赞标识符praiseFlag改成false就行了.
评论功能
评论我自己做的比较乱，主要问题就是，点击评论的时候，我获取不到在父元素点赞评论区域 上设置的的data-set
为什么评论会出现这个问题？点赞不会出现，
因为：评论的时候，输入框弹出来，点赞评论区域已经隐藏了，那么commandTab变成99，等我输入完评论以后，就找不到当前动态的标识符了，找不到就不能修改json 数组里面的数据，而点赞的时候，commandTab还没有变成99,设一个定时器200毫秒。
点击右边的评论按钮，点赞评论区显示——>点赞（评论）按钮——>点赞评论区隐藏
卡点：父元素上设置的dataset，在子元素上面获取不到，
迁就解决办法，再来一个变量，在前面的父元素的操作中，就是点赞评论区展开动画的时候，保留下来获取到的父元素的dataset
评论的那个弹框，我的处理是，input先fixed隐藏在最下面，点了评论以后显示，同时focus
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 |
| cursor-spacing | Number / String | 0 | 指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
一个是 吧底部的input推上来的效果，推上来会被盖住，一部分，用cursor-spacing调一下距离，
微信小程序仿朋友圈，实现点赞和评论功能相关推荐
- 微信小程序-仿朋友圈点赞评论操作面板
目录 微信小程序-仿朋友圈点赞评论操作面板 一.效果 二.实现 1.wxml实现 2.js实现 3.wxss实现 三.记录 1.dataset使用 微信小程序-仿朋友圈点赞评论操作面板 一.效果 二. ...
- 微信小程序仿朋友圈上传图片到服务器，后端通过C#实现
现在微信小程序拍照上传的需求越来越多了,绝大部分小程序项目都会用到,虽然技术上没什么难度,但对于初学者来说,也是件费时费力的事情,三年前我在写这些代码的时候也是花费好几天的时间,最近有点空闲时间,于是 ...
- 朋友圈计算机代码,微信小程序仿朋友圈代码
[实例简介] 微信小程序实现朋友圈页面.UGC发布,包含获取用户授权信息. [实例截图] [核心代码] circle ├── circle │ ├── app.js │ ├── app.jso ...
- 微信小程序-仿朋友圈发布动态（包括后端上传图片）
仿照微信朋友圈做了一个界面如下,先看效果: 1.点开界面 2.选择图片 3.点击上传 4.动态显示 第一个页面的wxml: <view class='page'><textarea ...
- 微信小程序 仿朋友圈
顶部实现在线好友的展示 <view><text>好友列表</text><scroll-view class="header" scroll ...
- 微信小程序引爆朋友圈的秘密
昨天,也就是2017年1月9日,微信上线重磅功能"小程序",一时间刷爆了朋友圏.从来没有一款产品像"微信"一样如此引人注目,从来没有一个应用像"小程序 ...
- 微信小程序：朋友圈发圈助手文案,头像,壁纸组合
这是一款微信朋友圈助手的一款小程序源码 内包含了朋友圈文案,壁纸,头像等等 每一个都包含了多个大分类 比如发圈助手有正能量,节假日祝福,搞笑段子等等 壁纸和头像自然也会有不同的分类,具体大家可以看演示 ...
- 最新微信小程序分享朋友圈
微信小程序分享朋友圈 近日,微信小程序官方文档更新 wx.showShareMenu(Object object),其中显示小程序可以分享到朋友圈啦! 但是,设置分享朋友圈的前提是必须同时设置发生给朋 ...
- 微信小程序分享朋友圈官方支持哪些方面（最新版本）
微信小程序分享朋友圈官方支持哪些方面? 1.微信小程序分享朋友圈支持单页模式,具体单页模式的详细说明可参考官方文档,文档链接为:微信小程序单页模式 2. 微信小程序分享朋友圈如果是自定义页面路径的话, ...
最新文章
- 代理中调用alert()
- 台式电脑改ip地址能不能上外网_如何将电脑当做路由器来用？一招让你不用为路由器发愁...
- 第一章 安装OpenResty(Nginx+Lua)开发环境
- linux之快速过滤文本的关键字以及快速过滤目录下的关键字
- 1小时零基础赚一千，教你完成图书管理系统，不用打代码绝对学得会！[完整全站教学 IVX 实战第四篇]
- 菜鸟学习笔记：Java基础篇2（变量、运算符、流程控制语句、方法）
- 所有的低谷，都是为了更上一层楼
- android真机调试步骤
- [原]LVM管理与虚拟机管理
- 点石成金 访客至上的Web和移动可用性设计秘笈pdf
- [转]100个经典C语言程序（益智类问题）
- R入门（一）----读取数据、查看数据
- 比尔盖兹退休告别演说：下个数位十年
- C++ qsort用法
- flask html 得到文本框 input的内容_flask入门 （二）（不用写代码的前端！）
- 量化投资基础学习（1）————常用库 numpy 函数 （2022.7.11）
- 鸟哥的Linux私房菜基础学习篇 第5章的重点探索
- 配置NW330USB无线网卡到FL2440
- 投票点赞链接制作投票链接在线制作投票图文链接制作点赞
- IDEA 查看所有断点/跳过所有断点/删除所有断点