a73a33b06a
Former-commit-id: f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f59ab0339a7fad79340308948667b1254e7de250 [formerly d7e13b40b46a808a25524433cae68e95db6a98b1]]]]] Former-commit-id: 9a2c521f0be4ffbbc715f337880168b40a352488 Former-commit-id: f0526a5e139ac2523e5cf1a9eccb83b121065d05 Former-commit-id: e80ccfb84a5cd9dd64d844999afa7ee1e0e1985b [formerly f77fec8cc261483da122e06c4d6454007eb3877a] Former-commit-id: 98cf5fd060753ccd960d7fdb9ac8246393da3890 Former-commit-id: 57ef44f6a5bb191f3f2584849f6c4fac835e409a Former-commit-id: 52173964469c5e6c308ac7d9a91990dab580b2c7 Former-commit-id: 9211b978a4bf1493974cbe59befd946f7c516b66 Former-commit-id: 30ac26684644764d096e4664e15d67c15c184ac5
106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<template>
|
|
<d2-container
|
|
ref="container"
|
|
:type="containerType"
|
|
:better-scroll="betterScroll"
|
|
:scroll-delay="scrollDelay"
|
|
@scroll="({x, y}) => { scrollTop = y }">
|
|
<template slot="header">
|
|
<el-form
|
|
:inline="true"
|
|
size="mini">
|
|
<el-form-item
|
|
label="布局类型"
|
|
class="d2-mb-0">
|
|
<el-radio-group v-model="containerType">
|
|
<el-radio-button label="full"></el-radio-button>
|
|
<el-radio-button label="card"></el-radio-button>
|
|
<el-radio-button label="ghost"></el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="滚动距离"
|
|
class="d2-mb-0">
|
|
<el-input
|
|
:value="scrollTop"
|
|
style="width: 130px;">
|
|
<template slot="append">px</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="!betterScroll"
|
|
label="事件延迟(ms)"
|
|
class="d2-mb-0">
|
|
<el-input-number
|
|
v-model="scrollDelay"
|
|
:min="10"
|
|
:max="2000"
|
|
:step="100"
|
|
style="width: 110px;"/>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button
|
|
v-if="scrollTop >= 55"
|
|
type="primary"
|
|
@click="$refs.container.scrollToTop">
|
|
回到顶部
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<el-alert
|
|
type="success"
|
|
:title="`${betterScroll ? '此示例开启了 BetterScroll ' : ''}请向下滚动`"
|
|
class="d2-mb-10"
|
|
center/>
|
|
<d2-demo-article
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:style="articleStyle"
|
|
long/>
|
|
<template slot="footer">
|
|
<el-form
|
|
:inline="true"
|
|
size="mini">
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollBy(0, 30)">相对滚动 (0, 30) 像素</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollTo(0, 100)">滚动到 (0, 100) 像素位置</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollTop(100)">滚动到垂直位置 100</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import d2DemoArticle from './components/d2-demo-article'
|
|
export default {
|
|
components: {
|
|
'd2-demo-article': d2DemoArticle
|
|
},
|
|
data () {
|
|
return {
|
|
containerType: 'full',
|
|
scrollDelay: 10,
|
|
scrollTop: 0
|
|
}
|
|
},
|
|
computed: {
|
|
// 是否开启 better scroll
|
|
betterScroll () {
|
|
return this.$route.query.bs === 'true'
|
|
},
|
|
// 根据滚动位置返回文章的样式
|
|
articleStyle () {
|
|
return {
|
|
opacity: this.scrollTop > 55 ? '1' : '.1'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|