Vue丝滑滚动组件封装

最新推荐文章于 2024-02-21 09:51:31 发布

Hunterst_

最新推荐文章于 2024-02-21 09:51:31 发布

阅读量654

点赞数

文章标签： css3 html css vue.js javascript

本文链接：https://blog.csdn.net/poporain_/article/details/122339209

版权

本文将介绍如何在Vue项目中封装一个丝滑的滚动组件，利用CSS3和JavaScript技术，实现平滑滚动效果，提升用户体验。内容涵盖HTML布局、CSS样式设计以及Vue组件的编写方法。

摘要由CSDN通过智能技术生成

// 右侧组件封装
<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.distance
      this.$nextTick(() => {
        window.scrollTo({
          top: distance,
          //丝滑滚动
          behavior: 'smooth',