init

uni_modules/nutui-uni/components/backtop/backtop.ts

@@ -0,0 +1,44 @@
+import type { ExtractPropTypes } from 'vue'
+import { CLICK_EVENT } from '../_constants'
+import { commonProps, makeNumberProp, makeStringProp } from '../_utils'
+
+export const backtopProps = {
+  ...commonProps,
+  /**
+   * @description 滚动区域的高度
+   */
+  height: makeStringProp('100vh'),
+
+  /**
+   * @description 距离页面底部距离
+   */
+  bottom: makeNumberProp(20),
+
+  /**
+   * @description 距离页面右侧距离
+   */
+  right: makeNumberProp(10),
+
+  /**
+   * @description 页面垂直滚动多高后出现
+   */
+  distance: makeNumberProp(200),
+
+  /**
+   * @description 设置组件页面层级
+   */
+  zIndex: makeNumberProp(10),
+
+  /**
+   * @description 自定义图标颜色
+   */
+  customColor: String,
+}
+
+export type BacktopProps = ExtractPropTypes<typeof backtopProps>
+
+export const backtopEmits = {
+  [CLICK_EVENT]: (evt: MouseEvent) => evt instanceof Object,
+}
+
+export type BacktopEmits = typeof backtopEmits

uni_modules/nutui-uni/components/backtop/backtop.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types'
+import { computed, defineComponent, ref } from 'vue'
+import { CLICK_EVENT, PREFIX } from '../_constants'
+import { getMainClass, getMainStyle } from '../_utils'
+import NutIcon from '../icon/icon.vue'
+import { backtopEmits, backtopProps } from './backtop'
+
+const props = defineProps(backtopProps)
+
+const emit = defineEmits(backtopEmits)
+
+const backTop = ref(false)
+const scrollTop = ref(1)
+const classes = computed(() => {
+  return getMainClass(props, componentName, {
+    show: backTop.value,
+  })
+})
+const style = computed(() => {
+  return getMainStyle(props, {
+    right: `${props.right}px`,
+    bottom: `${props.bottom}px`,
+    zIndex: props.zIndex,
+  })
+})
+
+function scroll(e: ScrollViewOnScrollEvent) {
+  scrollTop.value = 2
+  backTop.value = e.detail.scrollTop >= props.distance
+}
+
+function click(e: unknown) {
+  scrollTop.value = 1
+  emit(CLICK_EVENT, e as MouseEvent)
+}
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-backtop`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view>
+    <scroll-view
+      :scroll-y="true"
+      :style="{ height }"
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scroll="scroll"
+    >
+      <slot name="content" />
+    </scroll-view>
+    <view :class="classes" :style="style" @click.stop="click">
+      <slot name="icon">
+        <NutIcon
+          :custom-color="customColor"
+          name="top"
+          :size="19"
+          custom-class="nut-backtop-main"
+        />
+      </slot>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/backtop/index.scss

@@ -0,0 +1,40 @@
+.nut-theme-dark {
+  .nut-backtop {
+    &.show {
+      color: $dark-color;
+      background: $dark-background;
+      border: 1px solid $dark-background;
+    }
+
+    &-main {
+      color:'#ffffff';
+    }
+  }
+}
+
+.nut-backtop {
+  position: fixed;
+  display: none;
+
+  &.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: $white;
+    border: 1px solid $backtop-border-color;
+    border-radius: 50%;
+  }
+
+  &.show :active {
+    background: rgb(0 0 0 / 10%);
+  }
+
+  &-main {
+    color:'#000000';
+    transition: all 0.2s ease-in-out
+  }
+}
+
+

uni_modules/nutui-uni/components/backtop/index.ts

@@ -0,0 +1 @@
+export type * from './backtop'