vue-scroll滚动组件

安装方式：

可以在npm官网找到;连接

npm install vue-scroll --save

演示地址：

官方演示地址连接：点击这里

收获：

css计算属性calc();
vw,vh: 视图可见宽度和高度；
event.currentTarget；

项目实践：

这里是做个记录，留给我自己看，这个组件怎么用，建议去看上面的演示地址，直接复制很多变量没有，可能会报错。

<template><div class="scroll_view"><div class="dashboard" @click="toTopC">scrollTop:{{ position.scrollTop }} ++ {{ positionProps }}</div><divv-scroll:throttle="{ fn: onScroll, throttle: 500 }"class="translate_content"id="orderFullScreen"ref="scrollref"@click="toTopC"><el-rowclass="scroll_content"v-for="(key, index) in dataListProps":key="index"><!-- 头像 --><el-col :xs="3" :sm="2" :lg="1"><div class="speaker1"></div></el-col><!-- 文本 --><el-col :span="20"><div class="timeClick"><div><div class="td_user">&nbsp;&nbsp;<span class="speaker_text">Role1</span><span class="speaker_time">{{ key.startTime }}</span>&nbsp;<spanclass="el-icon-circle-check check_icon_color"></span></div><p class="audiot_style">&nbsp;&nbsp;<span>{{ key.content }}</span></p></div></div></el-col></el-row><el-row v-show="ssdataListProps[0]"><el-col :xs="3" :sm="2" :lg="1"><div class="speaker1"></div></el-col><el-col :span="20"><div><div class="td_user">&nbsp;&nbsp;<span class="speaker_text">Role1</span>&nbsp;<span class="el-icon-loading loading_icon_color"></span></div><p class="audiot_style">&nbsp;&nbsp;{{ ssdataListProps[0] }}</p></div></el-col></el-row><div style="height:5rem; width:1px"></div></div></div>
</template><script>
var translate_content = document.getElementsByClassName("translate_content")[0];export default {name: "scroll-view",//父组件穿过来的值props: ["dataListProps", "ssdataListProps", "positionProps"],data: function() {return {// orders,position: { scrollTop: 0, scrollLeft: 0 }};},methods: {onScroll: function(e, position) {console.log(e);console.log(position);this.position = position;},//可以通过event.currentTarget.scrollTop跳转到相应位置toTopC(e) {console.log(e.currentTarget.scrollTop);event.currentTarget.scrollTop = 10;}},watch: {positionProps(n, o) {console.log(n, o);// return scrollTo(0, n);}},updated() {console.table("up:" + this.positionProps);},mounted() {// window.addEventListener("scroll", this.showBackTop, true);}
};
</script><style lang="less" scoped>
.scroll_view {width: calc(100vw - 3.1rem);margin: 0.8rem 0.24rem 0;overflow-y: hidden;overflow-x: hidden;position: relative;max-height: calc(100vh - 1.5rem);
}.dashboard {position: absolute;top: 0px;left: 0;width: 100%;height: 12px;padding: 0 16px;line-height: 32px;color: #000;// background-color: #fff;text-align: left;z-index: 1;
}
.el-input__inner {font-size: 0.14rem;
}
.check_icon_color {color: #2185ff;font-size: 0.14rem;
}
.translate_content {background-color: #fff;width: calc(100vw - 3.55rem);max-height: calc(100vh - 2rem);padding: 0.8rem 0 2rem 0.6rem;overflow-y: auto;overflow-x: hidden;list-style: none;color: #2185ff;font-size: 0.18rem;font-size: 14px;.speaker1,.speaker2 {width: 0.44rem;height: 0.44rem;}.speaker1 {background: url("../assets/icon_role01_nor@2x.png") no-repeat center;background-size: 100%;}.speaker2 {background: url("../assets/icon_role02_nor@2x.png") no-repeat center;background-size: 100%;}.speaker_text {background-color: rgba(255, 255, 255, 0);font-size: 0.18rem; // font-family: PingFang-SC-Bold;font-weight: bold;color: #333333;}.speaker_time {display: inline-block;margin-left: 0.2rem;font-size: 0.14rem;font-weight: bold;color: #999999;}.audiot_style {color: #333333;font-weight: 500;font-size: 0.18rem;font-family: PingFang-SC-Medium;}
}.allfile {text-align: left; background-color: #eceef2;width: 98%;height: 100%;.audiotext_style {color: #409eff !important;}tr td {text-align: left;background: #eee;height: 0.3rem;padding: 0.1rem;}.el-tag--info {background-color: rgba(255, 255, 255, 0);}.el-tag {color: #999;border: none !important;font-size: 0.14rem;font-weight: bold;color: #999999 !important;}
}.el-switch {margin-top: 0.05rem;
}.el-icon-d-arrow-left {background-color: rgba(200, 200, 200, 0);
}.el-icon-d-arrow-right {background-color: rgba(200, 200, 200, 0);
}
@media screen and (max-width: 768px) {.scroll_view {overflow: hidden;width: 100%;margin: 0.8rem 0;}.translate_content {width: 100%;padding: 0.6rem 0.2rem;}
}
</style>

vue-scroll滚动组件相关推荐

vue自动滚动组件可以支持鼠标滚轮操作
vue自动滚动组件可以支持鼠标滚轮操作  <templat ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Vue【vue-seamless-scroll】滚动组件及注意事项
一.运用场景:VUE开发的项目中需要表格滚动展示信息二.组件:vue-seamless-scroll 三.使用:通过ul标签+css样式模拟表格,表头+表数据安装 npm install vue- ...
vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
vue仿PC端163music图片滚动组件
介绍这是一款模仿PC端网易云音乐的vue图片滚动插件 http://blog.shanamaid.top/2017/03/03/vue%E4%BB%BFPC%E7%AB%AF163music%E5% ...
vue 自定义popup组件并支持scroll组件
本来是使用第三方库 vant的vue 组件库的popup,后来在popup中使用better-scroll插件的时候,出现并不兼容的情况,也就自己搭建一个popu插件,中间遇到很多问题,都会记录一下 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...

vue-scroll滚动组件

安装方式：

演示地址：

收获：

项目实践：

vue-scroll滚动组件相关推荐

最新文章

热门文章