|
@@ -1,83 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="better-scroll-container">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- 动画时长
|
|
|
- <el-slider
|
|
|
- v-model="time"
|
|
|
- style="width: 300px"
|
|
|
- :min="100"
|
|
|
- :max="3000"
|
|
|
- ></el-slider>
|
|
|
-
|
|
|
- <el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
|
|
|
- <el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
|
|
|
- <el-button @click="handleScrollBy(100)">向下滚动100像素</el-button>
|
|
|
- <el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
|
|
|
- <el-button @click="handleScrollToElement(15)">滚动到第15个</el-button>
|
|
|
- <el-button @click="handleScrollToElement(25)">滚动到第25个</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <div ref="wrapper" class="right-content">
|
|
|
- <ul>
|
|
|
- <li v-for="n in 100" :id="`bs-item-${n}`" :key="n">n : {{ n }}</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import BScroll from "better-scroll";
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "BetterScroll",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- time: 1000,
|
|
|
- BS: null,
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.scrollInit();
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.scrollDestroy();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleScrollTo(y) {
|
|
|
- this.BS.scrollTo(0, -y, this.time);
|
|
|
- },
|
|
|
- handleScrollBy(y) {
|
|
|
- this.BS.scrollBy(0, -y, this.time);
|
|
|
- },
|
|
|
- handleScrollToElement(n) {
|
|
|
- this.BS.scrollToElement(`#bs-item-${n}`, this.time);
|
|
|
- },
|
|
|
- scrollInit() {
|
|
|
- this.BS = new BScroll(this.$refs["wrapper"], {
|
|
|
- mouseWheel: true,
|
|
|
- scrollbar: {
|
|
|
- fade: true,
|
|
|
- interactive: false,
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- scrollDestroy() {
|
|
|
- if (this.BS) {
|
|
|
- this.BS.destroy();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .better-scroll-container {
|
|
|
- .right-content {
|
|
|
- height: 500px;
|
|
|
- margin-top: 40px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|