模拟直播间评论的动画

<div

v-for="(item, index) in infoList"

:key="index"

class="showItem animate__animated animate__slideInUp"

{{ item.name }}--{{item.counter}}

</div>

<button @click="addAnimals">点我增加小动物</button>

</div>

</template>

export default {

data() {

return {

infoList: [

{

age: 5,

counter: 1,

{

age: 3,

counter: 2,

differentCounter:3,

//保存最外层容器的dom元素

wrapperDom: "",

//保存滚动区域dom元素

scrollContentDom: "",

//保存最外层容器的offsettop

wrapperHeight: "",

};

mounted() {

//挂载之后获取值

//获取设置了滚动属性的dom元素

this.wrapperDom = this.$refs.wrapperRef;

//获取包裹元素的滚动区域dom

this.scrollContentDom = this.$refs.scorllContentRef;

//获取设置了滚动属性的dom元素高度

this.wrapperHeight = this.wrapperDom.offsetHeight;

methods: {

addAnimals() {

let obj = {

age: 1,

counter:this.differentCounter++

};

this.infoList.push(obj);

this.$nextTick(() => {

this.scrollCode();

});

//抽取的关于滚动的代码

scrollCode() {

//在往list中增加内容时，产生滚动效果

//获取当前滚动区域的高度

const scrollHeight = this.scrollContentDom.offsetHeight;

//获取当前滚动区域的高度和容器高度差值

const diff = scrollHeight - this.wrapperHeight;

//获取滚动区域的滚动高度

const top = this.wrapperDom.scrollTop;

if (diff - top > -65 || diff - top == 65) {

this.wrapperDom.scrollTo({

top: diff + 15,

left: 0,

behavior: "smooth",

});

console.log("------------该滚动啦");

}

};

</script>

.box {

height: 100%;

width: 100%;

background: yellow;

}

.scrollBox {

height: 200px;

width: 200px;

background-color: pink;

overflow-y: scroll;

}

.showItem {

height: 30px;

width: 100%;

background: lightblue;

border-radius: 10px;

margin-bottom: 5px;

display: flex;

justify-content: center;

align-items: center;

}

.scrollContent {

background: red;

}

</style>

模拟直播间评论的动画相关推荐

html5 在线直播代码,用HTML5代码实现烘托直播间疯狂点赞动画氛围（附全部源码）...
用HTML5代码实现烘托直播间疯狂点赞动画氛围(附全部源码) 直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯 ...
【引流技术】抖斗音+快块手直播间评论助手，支持直播间喊话+视频评论区喊话=到指定直播间引流精准粉丝【永久脚本+详细教程】
如果你觉得直播间发言手动太麻烦了,或许这个自动工具能帮到你! 1.开始运行前,需要手动去打开打开直播间或者视频评论区,再运行脚本. 2.脚本就是模拟人工操作,在相应的APP里进行评论,无突破APP限制 ...
android刷礼物动画demo,GiftSurfaceView 直播间送礼物动画
GiftSurfaceView GiftSurfaceView 最初出自于2014年开发HalloStar项目时所写,主要用于HalloStar项目直播间的送礼物动画.现在想来,那夕阳下的奔跑,是我逝 ...
使用uiautomator2获取Android抖音直播间评论数据
此内容在两位前人的基础上优化实现 UIAutomator2 介绍了如何使用Android黑盒测试工具 python+uiautomator2+weditor获取页面的所有文本数据介绍了 ...
百度直播评论助手1.0版本（直播间自动发言软件）
该软件是用Python打发出来的一个脚本,目前的功能就是针对百度直播进行小号评论发言,烘托气氛,达到引流.带货卖产品的功能. 软件的使用操作非常简单,只需要设置好直播间的地址,发言的时间,广告语,还有 ...
GPT虚拟直播Demo系列（一）｜GPT接入直播间实现主播与观众互动
摘要 ChatGPT和元宇宙都是当前数字化领域中非常热门的技术和应用.结合两者的优势和特点,可以探索出更多的应用场景和商业模式.例如,在元宇宙中使用ChatGPT进行自然语言交互,可以为用户提供更加智 ...
万字拆解自嗨锅：造价近百万的直播间，是单场直播GMV破100万的法门吗？
自嗨锅抖音自播仅一个月,就可以做到连续三场 GMV 单场破100万的成绩.自嗨锅为什么能能有这样的成绩,有哪些点对于新进入抖音电商的食品直播策略有借鉴意义呢?来看看自嗨锅在抖音自播方面究竟做对了 ...
手把手教你提升抖音直播间人气、流量的6个技巧
"抖音直播带货"绝对是近两年最热的"风口",几乎全民直播带货,在这样一个繁荣景象下,大家都想迎上这个风口,无数明星.名人纷纷加入"混战". ...
抖音直播间小风车跳转微信安全吗
抖音直播间小风车跳转微信安全吗,抖音直播间小风车跳转微信, 评论区,个人主页跳转第三方 #抖音直播间小风车跳转公众号 #抖音直播间评论区跳转小程序 #抖音星图小风车如何实现跳转直播间小风车跳转点击 ...

模拟直播间评论的动画

模拟直播间评论的动画相关推荐

最新文章

热门文章