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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import d2ContainerFull from './components/d2-container-full.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'd2-container',
|
name: 'd2-container',
|
||||||
props: {
|
props: {
|
||||||
@@ -37,7 +38,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
'd2-container-full': () => import('../d2-container-full/index.vue')
|
'd2-container-full': d2ContainerFull
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -42,7 +42,8 @@ const demoPlugins = {
|
|||||||
path: `${pre}better-scroll`,
|
path: `${pre}better-scroll`,
|
||||||
title: '滚动扩展',
|
title: '滚动扩展',
|
||||||
children: [
|
children: [
|
||||||
{ path: `${pre}better-scroll/base`, title: '基本用法' }
|
{ path: `${pre}better-scroll/base`, title: '基础用法' },
|
||||||
|
{ path: `${pre}better-scroll/to`, title: '滚动定位' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ path: `${pre}build`, title: '环境区分' },
|
{ path: `${pre}build`, title: '环境区分' },
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
|
<template slot="header">基础用法</template>
|
||||||
<div ref="wrapper" class="demo-bs-wrapper">
|
<div ref="wrapper" class="demo-bs-wrapper">
|
||||||
<div>
|
<div>
|
||||||
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
|
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
|
||||||
@@ -17,8 +18,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
let wrapper = this.$refs.wrapper
|
this.BS = new BScroll(this.$refs.wrapper, {
|
||||||
this.BS = new BScroll(wrapper, {
|
|
||||||
mouseWheel: true,
|
mouseWheel: true,
|
||||||
scrollbar: {
|
scrollbar: {
|
||||||
fade: true
|
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