123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <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';
-
- const dom = weex.requireModule('dom')
-
-
- 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'
- }
-
- style.borderTopLeftRadius = radius
- style.borderTopRightRadius = radius
- style.borderBottomLeftRadius = radius
- style.borderBottomRightRadius = radius
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- }
- },
- methods: {
- backToTop() {
-
- 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
- })
-
-
-
- uni.pageScrollTo({
- scrollTop: 0,
- duration: this.duration
- });
-
- 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>
|