sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

完善

Browse Source 
Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
This commit is contained in:
liyang
2018-07-17 21:54:38 +08:00
parent db62c21964
commit 14c921e6b1
214 changed files with 157 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/demo/plugins/better-scroll/base.vue Normal file
View File

@@ -0,0 +1,63 @@
<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>
</div>
</div>
</d2-container>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data () {
return {
BS: null
}
},
mounted () {
this.scrollInit()
},
beforeDestroy () {
this.scrollDestroy()
},
methods: {
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>
@import '~@/assets/style/public.scss';
.demo-bs-wrapper {
height: 200px;
width: 300px;
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>

106
src/pages/demo/plugins/better-scroll/to.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<d2-container type="full">
<template slot="header">滚动定位</template>
<el-row :gutter="20">
<el-col :span="8">
<div ref="wrapper" class="demo-bs-wrapper">
<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>
<template slot="footer">
<d2-demo-link-btn title="文档" link="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"/>
</template>
</d2-container>
</template>
<script>
// 插件
import BScroll from 'better-scroll'
export default {
data () {
return {
time: 300,
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(`#demo-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>
@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>