You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.8 KiB
132 lines
2.8 KiB
<template>
|
|
<view
|
|
class="u-page"
|
|
ref="u-back-top"
|
|
>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义backTop(滚动页面即可在右下角看到图标)</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__backTop-item">
|
|
<u-checkbox-group
|
|
placement="column"
|
|
shape="square"
|
|
@change="checkboxChange"
|
|
v-model="value"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-back-top
|
|
:right="backTopData.right"
|
|
:customStyle="backTopData.customStyle"
|
|
:bottom="backTopData.bottom"
|
|
:icon="backTopData.icon"
|
|
:mode="backTopData.mode"
|
|
:iconStyle="backTopData.iconStyle"
|
|
:duration="backTopData.duration"
|
|
:scrollTop="scrollTop"
|
|
@click="click"
|
|
></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: ['自定义图标'],
|
|
backTopData: {
|
|
mode: 'circle',
|
|
icon: 'arrow-upward',
|
|
bottom: 100,
|
|
customStyle: {},
|
|
iconStyle: {},
|
|
right:20,
|
|
duration: 300
|
|
},
|
|
scrollTop: 0,
|
|
// 被自定义的样式
|
|
checkboxList: [{
|
|
name: '显示方形',
|
|
},
|
|
{
|
|
name: '自定义图标',
|
|
},
|
|
{
|
|
name: '自定义距离',
|
|
},
|
|
{
|
|
name: '自定义样式',
|
|
},
|
|
{
|
|
name:'自定义返回顶部滚动时间',
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 演示中默认勾选了自定义图标
|
|
this.backTopData.icon = "arrow-up"
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop;
|
|
},
|
|
methods: {
|
|
checkboxChange(n) {
|
|
if (n.includes('显示方形')) {
|
|
this.backTopData.mode = 'square'
|
|
} else {
|
|
this.backTopData.mode = "circle"
|
|
}
|
|
if (n.includes('自定义图标')) {
|
|
this.backTopData.icon = "arrow-up"
|
|
} else {
|
|
this.backTopData.icon = "arrow-upward"
|
|
}
|
|
if (n.includes('自定义距离')) {
|
|
this.backTopData.bottom = 300
|
|
this.backTopData.right=20
|
|
} else {
|
|
this.backTopData.bottom = 100
|
|
}
|
|
if (n.includes('自定义样式')) {
|
|
this.backTopData.customStyle = {
|
|
backgroundColor: '#2979ff',
|
|
}
|
|
this.backTopData.iconStyle = {
|
|
color: '#ffffff'
|
|
}
|
|
} else {
|
|
this.backTopData.customStyle = {}
|
|
this.backTopData.iconStyle = {}
|
|
}
|
|
if (n.includes('自定义返回顶部滚动时间')) {
|
|
this.backTopData.duration =1500
|
|
} else {
|
|
this.backTopData.duration =300
|
|
}
|
|
},
|
|
click() {
|
|
console.log('click');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
height: 1200px;
|
|
&__backTop-item{
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
</style>
|
|
|