130 lines
3.7 KiB
Vue
130 lines
3.7 KiB
Vue
<template>
|
||
<u-transition
|
||
mode="fade"
|
||
:customStyle="backTopStyle"
|
||
:show="show"
|
||
>
|
||
<view
|
||
class="u-back-top"
|
||
:style="[contentStyle]"
|
||
v-if="!$slots.default && !$slots.$default"
|
||
@click="backToTop"
|
||
>
|
||
<u-icon
|
||
:name="icon"
|
||
:custom-style="iconStyle"
|
||
></u-icon>
|
||
<text
|
||
v-if="text"
|
||
class="u-back-top__text"
|
||
>{{text}}</text>
|
||
</view>
|
||
<slot v-else />
|
||
</u-transition>
|
||
</template>
|
||
|
||
<script>
|
||
import props from './props.js';
|
||
// #ifdef APP-NVUE
|
||
const dom = weex.requireModule('dom')
|
||
// #endif
|
||
/**
|
||
* backTop 返回顶部
|
||
* @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
|
||
* @tutorial https://uviewui.com/components/backTop.html
|
||
*
|
||
* @property {String} mode 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
|
||
* @property {String} icon 自定义图标 （默认 'arrow-upward' ） 见官方文档示例
|
||
* @property {String} text 提示文字
|
||
* @property {String | Number} duration 返回顶部滚动时间 （默认 100）
|
||
* @property {String | Number} scrollTop 滚动距离 （默认 0 ）
|
||
* @property {String | Number} top 距离顶部多少距离显示，单位px （默认 400 ）
|
||
* @property {String | Number} bottom 返回顶部按钮到底部的距离，单位px （默认 100 ）
|
||
* @property {String | Number} right 返回顶部按钮到右边的距离，单位px （默认 20 ）
|
||
* @property {String | Number} zIndex 层级 （默认 9 ）
|
||
* @property {Object<Object>} iconStyle 图标的样式，对象形式 （默认 {color: '#909399',fontSize: '19px'}）
|
||
* @property {Object} customStyle 定义需要用到的外部样式
|
||
*
|
||
* @example <u-back-top :scrollTop="scrollTop"></u-back-top>
|
||
*/
|
||
export default {
|
||
name: 'u-back-top',
|
||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||
computed: {
|
||
backTopStyle() {
|
||
// 动画组件样式
|
||
const style = {
|
||
bottom: uni.$u.addUnit(this.bottom),
|
||
right: uni.$u.addUnit(this.right),
|
||
width: '40px',
|
||
height: '40px',
|
||
position: 'fixed',
|
||
zIndex: 10,
|
||
}
|
||
return style
|
||
},
|
||
show() {
|
||
return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top)
|
||
},
|
||
contentStyle() {
|
||
const style = {}
|
||
let radius = 0
|
||
// 是否圆形
|
||
if(this.mode === 'circle') {
|
||
radius = '100px'
|
||
} else {
|
||
radius = '4px'
|
||
}
|
||
// 为了兼容安卓nvue，只能这么分开写
|
||
style.borderTopLeftRadius = radius
|
||
style.borderTopRightRadius = radius
|
||
style.borderBottomLeftRadius = radius
|
||
style.borderBottomRightRadius = radius
|
||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
|
||
}
|
||
},
|
||
methods: {
|
||
backToTop() {
|
||
// #ifdef APP-NVUE
|
||
if (!this.$parent.$refs['u-back-top']) {
|
||
uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`)
|
||
}
|
||
dom.scrollToElement(this.$parent.$refs['u-back-top'], {
|
||
offset: 0
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef APP-NVUE
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: this.duration
|
||
});
|
||
// #endif
|
||
this.$emit('click')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../libs/css/components.scss';
|
||
$u-back-top-flex:1 !default;
|
||
$u-back-top-height:100% !default;
|
||
$u-back-top-background-color:#E1E1E1 !default;
|
||
$u-back-top-tips-font-size:12px !default;
|
||
.u-back-top {
|
||
@include flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex:$u-back-top-flex;
|
||
height: $u-back-top-height;
|
||
justify-content: center;
|
||
background-color: $u-back-top-background-color;
|
||
|
||
&__tips {
|
||
font-size:$u-back-top-tips-font-size;
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
</style>
|