项目初始化

sheep/ui/su-fixed/su-fixed.vue

@@ -0,0 +1,217 @@
+<template>
+  <view class="ui-fixed">
+    <view
+      class="ui-fixed-box"
+      :id="`fixed-${uuid}`"
+      :class="[{ fixed: state.fixed }]"
+      :style="[
+        {
+          left: sticky ? 'auto' : '0px',
+          top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
+          bottom: insetHeight,
+          zIndex: index + sheep.$zIndex.navbar,
+        },
+        !alway ? { opacity: state.opacityVal } : '',
+      ]"
+    >
+      <view
+        class="ui-fixed-content"
+        @tap="toTop"
+        :style="[{ zIndex: index + sheep.$zIndex.navbar }]"
+      >
+        <slot></slot>
+        <view
+          v-if="safeAreaInsets.bottom && bottom && isInset"
+          class="inset-bottom"
+          :style="[{ height: safeAreaInsets.bottom + 'px' }]"
+        ></view>
+      </view>
+      <view class="ui-fixed-bottom" :class="[bg]" v-if="bottom"></view>
+      <view
+        class="ui-fixed-bg"
+        :class="[ui, bg]"
+        :style="[
+          { zIndex: index + sheep.$zIndex.navbar - 1 },
+          bgStyles,
+          opacity ? { opacity: state.opacityVal } : '',
+        ]"
+      ></view>
+    </view>
+    <view
+      class="skeleton"
+      :style="[{ height: state.content.height + 'px', width: width + 'px' }]"
+      v-if="sticky ? state.fixed : placeholder && state.fixed"
+    ></view>
+  </view>
+</template>
+
+<script setup>
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue';
+  import sheep from '@/sheep';
+  const { safeAreaInsets } = sheep.$platform.device;
+
+  const vm = getCurrentInstance();
+
+  const uuid = sheep.$helper.guid();
+  const sys_navBar = sheep.$platform.navbar;
+  const state = reactive({
+    content: {},
+    fixed: true,
+    scrollTop: 0,
+    opacityVal: 0,
+  });
+  const insetHeight = computed(() => {
+    if (state.fixed && props.bottom) {
+      if (props.isInset) {
+        return props.val + 'px';
+      } else {
+        return props.val + safeAreaInsets.bottom + 'px';
+      }
+    } else {
+      return 'auto';
+    }
+  });
+  const props = defineProps({
+    noNav: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    bg: {
+      type: String,
+      default: '',
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+    val: {
+      type: Number,
+      default: 0,
+    },
+    width: {
+      type: [String, Number],
+      default: 0,
+    },
+    alway: {
+      type: Boolean,
+      default: true,
+    },
+    opacity: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: [Number, String],
+      default: 0,
+    },
+    placeholder: {
+      type: [Boolean],
+      default: false,
+    },
+    sticky: {
+      type: [Boolean],
+      default: false,
+    },
+    noFixed: {
+      type: Boolean,
+      default: false,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    clickTo: {
+      type: Boolean,
+      default: false,
+    },
+    //是否需要安全区
+    isInset: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  state.fixed = !unref(props.sticky);
+  onPageScroll((e) => {
+    let top = e.scrollTop;
+    state.scrollTop = top;
+    state.opacityVal = top > sheep.$platform.navbar ? 1 : top * 0.01;
+  });
+
+  onMounted(() => {
+    nextTick(() => {
+      computedQuery();
+    });
+  });
+
+  const computedQuery = () => {
+    uni.createSelectorQuery()
+      .in(vm)
+      .select(`#fixed-${uuid}`)
+      .boundingClientRect((data) => {
+        if (data != null) {
+          state.content = data;
+          if (unref(props.sticky)) {
+            setFixed(state.scrollTop);
+          }
+        }
+      })
+      .exec();
+  };
+
+  const setFixed = (value) => {
+    if (unref(props.bottom)) {
+      state.fixed =
+        value >=
+        state.content.bottom -
+          sheep.$platform.device.windowHeight +
+          state.content.height +
+          unref(props.val);
+    } else {
+      state.fixed =
+        value >=
+        state.content.top -
+          (unref(props.noNav) ? unref(props.val) : unref(props.val) + sheep.$platform.navbar);
+    }
+  };
+
+  const toTop = () => {
+    if (props.hasToTop) {
+      uni.pageScrollTo({
+        scrollTop: state.content.top,
+        duration: 100,
+      });
+    }
+  };
+</script>
+
+<style lang="scss">
+  .ui-fixed {
+    .ui-fixed-box {
+      position: relative;
+      width: 100%;
+      &.fixed {
+        position: fixed;
+      }
+      .ui-fixed-content {
+        position: relative;
+      }
+      .ui-fixed-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        z-index: 1;
+        pointer-events: none;
+      }
+    }
+  }
+  .inset-bottom {
+    background: #fff;
+  }
+</style>