Press UI

# BackTop Back to top

When the page is too long and you slide down, a convenient operation to return to the top will appear, helping users to quickly return to the top of the page.

# Import

import PressBackTop from 'press-ui/press-back-top/press-back-top';

export default {
  components: {
    PressBackTop,
  }
}

# Code demonstration

# Basic usage

The parent component monitors scrolling and passes it to the back-top component scrollTop. The back-top component determines whether to display it based on the size of scrollTop and top.

If the scrollToTop method is passed in, the method will be executed to return to the top, otherwise uni.pageScrollTo({ scrollTop: 0 }) will be executed.

<scroll-view
  scroll-y
  enhanced
  scroll-with-animation
  :scroll-top="newScrollTop"
  @scroll="onScroll"
>
</scroll-view>

<PressBackTop
  :scroll-top="scrollTop"
  :scroll-to-top="scrollToTop"
/>

export default {
  data() {
    return {
      scrollTop: 0,
      newScrollTop: 0,
    }
  },

  methods: {
    onScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
    scrollToTop() {
      that.newScrollTop = that.scrollTop;
      setTimeout(() => {
        that.newScrollTop = 0;
      });
    },
  }
}

# Custom shape

The shape of the button can be modified through mode, circle is a circle, square is a square.

<PressBackTop mode="square" />

# Custom Icon

Use icon to modify the icon of the back to top button, which can be a built-in icon or an image path.

<PressBackTop icon="arrow-up" />

# Custom Distance

You can use the top parameter to modify the page scroll distance for the back to top button to appear.

<PressBackTop top="10" />

# Custom style

  • Customize the icon style through the icon-style parameter, such as color, size, etc.
  • Modify the background color, size, etc. of the return button through custom-style
<PressBackTop icon-style="color: #fff" custom-style="background-color: #2979ff" />

# Custom text

Customize the text through the text parameter, which is empty by default.

<PressBackTop text="Top" />

# API

# Props

Parameters Description Type Default value
mode Whether to display a pop-up window string circle
icon Custom icon string back-top
text Prompt text string -
size Component size, unit px string | number 40
duration Back to top scrolling time string 100
top Display component at a certain distance from the top, unit px string | number 400
scroll-top Scrolling distance string | number 0
bottom Distance from the back to top button to the bottom, unit px string | number 100
right The distance from the back to top button to the right, in px string | number 20
z-index Level string | number 9
icon-style Icon style string -
scroll-to-top Custom scrolling method function -

# Events

Event name Description Parameters
click Click -

# Online debugging

横屏

← Grid →