在小程序，邀请好友加入，或者好友离开，希望有个自右向左飘过去的消息提示，要求就是一个个的在同一行。
参考：https://blog.csdn.net/weixin_43254829/article/details/93977740
实现出飘的效果，然后自己重新改了下，改成只显示一行，即随机定的高度设为固定高度即可，但是会出现一个问题，就是重叠，如果快速的点击按钮，就会一个个重叠上去，这也是我要解决的问题。
思路：
想办法得到前一条数据居左或者居右的位置，看到前一条数据已经显示完全，即后一条数据就可以出现了。因为自右向左，所以我用了居左来做判断（居左的位置 < 屏幕宽度 - 显示的View的宽度）。
设置两个list，一个和数据绑定A，一个作为缓冲B，在添加数据的时候如果A列表没有内容，那么就可以直接加入并绑定到数据里面，当A里已有数据，此时将新的数据添加到B，如果B只有1条内容，那么直接add，如果不止，那么先不管他。
然后在add的方法里面去获取到A的最后一条数据，得到该数据绑定的view信息，判断是否该view已经全部显示，即上面说的居左判断。1⃣️全部显示：从B里取出第一条数据添加的A，绑定数据，B移除第一条，判断B里是否还有数据，若还有，走add；2⃣️还未显示完：add继续加。
因为是css写的动画，所以可以使用bindanimationend来监听动画的结束，当动画结束的时候判断当前的是哪条数据，移除该数据。
在转成组件写法的时候遇到获取的位置得不到，解决办法就是.in(this)，例：var query = wx.createSelectorQuery().in(this);（参考：https://blog.csdn.net/yys190418/article/details/101368790）
效果：
觉得add这方法的名字命的不好，不知道叫啥好，就先这样吧
网友评论