《前端》vue滚动条---2020年7月10日

最新推荐文章于 2024-07-18 16:34:01 发布

bellediao

最新推荐文章于 2024-07-18 16:34:01 发布

阅读量192

点赞数

分类专栏：前端模板 VUE.JS

本文链接：https://blog.csdn.net/bellediao/article/details/107266748

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

模板

18 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中使用滚动条插件，包括cdn引入和webpack的npm安装方法，以及在组件中的具体应用。同时提供了开发者资源链接，帮助实现局部滚动效果。

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

1、介绍一个vue滚动条插件 `vue-happy-scroll`

我的笔记链接：https://blog.csdn.net/bellediao/article/details/107269281

当前版本不支持移动端

1.1安装方法

1.1.1 cdn引入

<!-- 引入css，该链接始终为最新版的资源 -->
<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
<!-- 引入组件，该链接始终为最新版的资源 -->
<script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

1.1.2 我不熟悉的webpack的npm安装

npm install vue-happy-scroll --save-dev

注册组件：

在main.js文件中编写一下代码段：

import Vue from 'vue'
import { HappyScroll } from 'vue-happy-scroll'
//自定义组件名
Vue.component('happy-scroll', HappyScroll)
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

2、在 vue 组件中使用

核心是使用 happy-scroll标签即可。

特此奉上开发者的readme：https://blog.csdn.net/bellediao/article/details/107269281

小案例：

   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入css，该链接始终为最新版的资源 -->
    <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件，该链接始终为最新版的资源 -->
    <script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>
</head>

<body>
    <div id='vueScoll'>
        <!-- 外层盒子,必须有 -->
        <div style="height:200px;width:300px;background-color:#ccc;">
            <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
                <!-- 内层盒子——内容区 -->
                <div class="con">
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                </div>
            </happy-scroll>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#vueScoll",
        })
    </script>
</body>

vue滚动条github资源

tangdaohai/vue-happy-scroll: 基于vue2.0实现的滚动条插件。scroll component fro vue2.0 https://github.com/tangdaohai/vue-happy-scroll

我上传的资源开发者资源：

vuescroll插件实现局部滚动_qq_36877190的博客-CSDN博客_vue 局部滚动 https://blog.csdn.net/qq_36877190/article/details/93745255?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

Vue：无限滚动-通过vant组件_qq_36413371的博客-CSDN博客_vant 滚动 https://blog.csdn.net/qq_36413371/article/details/98948351

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》vue滚动条---2020年7月10日

1、介绍一个vue滚动条插件vue-happy-scroll当前版本不支持移动端1.1安装方法1.1.1 cdn引入<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css"><script src="https://cdn.jsdelivr.ne.
复制链接

扫一扫