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