Vue丝滑滚动组件封装

// 右侧组件封装
<template><div id="scrollwrap"><ul><li@click="scrollmethod(item)"v-for="(item, index) in infor":key="index">{{ item.name }}</li></ul></div>
</template><script>
export default {data() {return {// active: true,}},props: {infor: {type: Array,default() {return [{id: 'nihao',name: '你好',},]},},distance: {type: Number,//视窗到事件距离default: 50,},},methods: {scrollmethod(item) {let distance = document.getElementById(item.id).offsetTop - this.distancethis.$nextTick(() => {window.scrollTo({top: distance,//丝滑滚动behavior: 'smooth',})})},},
}
</script><style scoped>
#scrollwrap{width: 128px;height: 371px;background: white;position: fixed;top: 30%;right: 2%;/* margin-right: 30px; */}
ul{text-align: center;}
li{cursor: pointer;margin: 10px;list-style: none;width:128px; text-align:left; font-size:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}</style>

Vue丝滑滚动组件封装相关推荐

基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
vue弹出框组件封装
新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue<template><div class="mack" ...
vue elementui 搜索栏子组件封装
前言描述: 在基本项目中搜索栏.分页组件格式样式几乎是固定的,只是对应的数据不同,由于模块会随着需求的不断增加,可能会导致重复代码越来越多,这时可以用到子组件,需要将相同的模块代码统一封装,提高开发 ...
vue cube-ui 搜索栏子组件封装
前言 vue2 整合 cube-ui 子组件(供有点点基础的看) 需求实现子组件(search_data_component.vue) html <template><div c ...
vue PC端弹窗组件封装
在项目中,需要做一个可以任意更改颜色的弹窗,找了一些组件,发现都不是自己想要的,打算自己动手写一下. 先看看效果图实现的效果主要是可以自由更改按钮文字的大小,背景色等接下来看看我操作的代码首先, ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
vue 文件上传组件封装
增加图片缩略图以及Word.txt文档在线预览文件上传组件完整代码 <template><div><el-uploadclass="upload-demo&q ...

Vue丝滑滚动组件封装

Vue丝滑滚动组件封装相关推荐

最新文章

热门文章