vue-凯发k8官方网

安装方式：

可以在npm凯发k8官方网官网找到;连接

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>

总结

以上是凯发k8官方网为你收集整理的vue-scroll滚动组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。