no message
Former-commit-id: 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly f7182f859150a21635c09cc195c7148601755e5f [formerly 7dd89561de98b79fb315b8f0d74a9b3c929ddf4e]]]]] Former-commit-id: 2a7c572d32164c0130da45c457dbe4fcac92a6e1 Former-commit-id: 00c962387af18e9da0f79968947afbb8fe2fa232 Former-commit-id: 8ce5585bb9b4929547c39f441d0a3a8684ac9547 [formerly 9658f3b1f02bd0bab471a7d7c0355e99dba1f2fd] Former-commit-id: 0ebad305d4c39c6c5a4f2ad1b7f37f27710deddd Former-commit-id: d78960ee0093d1569ac932aefa186124f0ab7201 Former-commit-id: 0f71d88c24af1f5b2ec8cf90ece46f7338fdd73a Former-commit-id: 485c45130570d9af769afd96e17275cddf6dff6a Former-commit-id: ab2275efbe91fbc8545a2177d74bf7f850d69d44
This commit is contained in:
@@ -20,6 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import d2ContainerFull from './components/d2-container-full.vue'
|
||||
export default {
|
||||
name: 'd2-container',
|
||||
props: {
|
||||
@@ -37,7 +38,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-container-full': () => import('../d2-container-full/index.vue')
|
||||
'd2-container-full': d2ContainerFull
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -42,7 +42,8 @@ const demoPlugins = {
|
||||
path: `${pre}better-scroll`,
|
||||
title: '滚动扩展',
|
||||
children: [
|
||||
{ path: `${pre}better-scroll/base`, title: '基本用法' }
|
||||
{ path: `${pre}better-scroll/base`, title: '基础用法' },
|
||||
{ path: `${pre}better-scroll/to`, title: '滚动定位' }
|
||||
]
|
||||
},
|
||||
{ path: `${pre}build`, title: '环境区分' },
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">基础用法</template>
|
||||
<div ref="wrapper" class="demo-bs-wrapper">
|
||||
<div>
|
||||
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
|
||||
@@ -17,8 +18,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let wrapper = this.$refs.wrapper
|
||||
this.BS = new BScroll(wrapper, {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true
|
||||
|
||||
90
src/pages/demo/plugins/better-scroll/to.vue
Normal file
90
src/pages/demo/plugins/better-scroll/to.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">滚动定位</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div ref="wrapper" class="demo-bs-wrapper d2-mb">
|
||||
<div>
|
||||
<div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="d2-mb">
|
||||
<p>滚动时间 ms</p>
|
||||
<el-slider v-model="time" :min="100" :max="3000"></el-slider>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
|
||||
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
|
||||
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
|
||||
<el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
|
||||
<el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BScroll from 'better-scroll'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
time: 300,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleScrollTo (y) {
|
||||
this.BS.scrollTo(0, -y, this.time)
|
||||
},
|
||||
handleScrollBy (y) {
|
||||
this.BS.scrollBy(0, -y, this.time)
|
||||
},
|
||||
handleScrollToElement (n) {
|
||||
this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.demo-bs-wrapper {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid $color-border-1;
|
||||
border-radius: 4px;
|
||||
.demo-bs-item {
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid $color-border-4;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1 +1 @@
|
||||
6a89e5af690b993ba243a817b218c2adfdc096fe
|
||||
d7679ad7cc0f1a79073949aee6e15694c6858000
|
||||
Reference in New Issue
Block a user