uniapp 电梯导航

      <goods :ref="'goods'+index" v-if="item.type === 'goods'" :dataField="item.dataField" :shopId="shopId" :homeStatus="homeStatus" />

      <elevator-navigation ref="elevatorNavigation" v-if="item.type === 'elevatorNavigation'" :dataField="item.dataField" :pageScorllTop="pageScorllTop" @changeElevatorNavigation="changeElevatorNavigation" @handlePosition="handleElevatorNavigationPosition" />

 // 电梯导航切换
    changeElevatorNavigation(data) {
      const { positionIndex } = data || {};
      const goodsRef = this.$refs[`goods${positionIndex+1}`];
      goodsRef && goodsRef[0].handlerScoll(this.pageScorllTop || 0);
    },
    
  

elevator-navigation 文件

<template>
  <view
    id="feature-elevator-navigation"
    class="feature-elevator-navigation"
    :style="{
      'background-color': dataField.bgColor || '#F5F5F5',
      position: fixnavigation ? 'fixed' : '',
      top: (navbarHeight - 12) + 'rpx',
      paddingBottom: dataField.type == 2 ? 0 : '16rpx'
    }"
  >
    <view
      :class="{
        'elevator-navigation': true,
        'elevator-navigation-between': dataField.navigationList.length < 4,
      }"
    >
      <view
        v-for="(item, index) in dataField.navigationList"
        :key="index"
        class="elevator-navigation-item"
        @click="handelClick(index, item)"
      >
        <image mode="aspectFit" v-if="dataField.type == 1" :src="picDomain + item.img" />
        <view
          :class="{
            'elevator-navigation-text-active': index === activeIndex,
            'elevator-navigation-text': true,
          }"
          v-if="dataField.type == 2"
          >{{ item.title }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
const config = require("@/utils/config.js");
export default {
  props: {
    dataField: {
      type: Object,
      default() {
        return {};
      },
    },
    pageScorllTop: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      picDomain: config.picDomain,
      // 当前选中的index
      activeIndex: 0,
      // 当前元素距页面顶部的距离
      topDis: 1000,
      fixnavigation: false,
      navbarHeight: 0,
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  watch: {
    pageScorllTop(nv) {
      const { topDis, dataField } = this;
      // #ifdef MP-WEIXIN
      if (nv >= topDis - this.navbarHeight) {
        this.fixnavigation = true;
        this.$emit("handlePosition", dataField.type == 1 ? 124 : 86);
      } else {
        this.fixnavigation = false;
        this.$emit("handlePosition", 0);
      }
      // #endif
      // #ifndef MP-WEIXIN
      if (nv >= topDis - 8) {
        this.fixnavigation = true;
        this.$emit("handlePosition", dataField.type == 1 ? 124 : 86);
      } else {
        this.fixnavigation = false;
        this.$emit("handlePosition", 0);
      }
      // #endif
    },
  },
  mounted() {
    uni.getSystemInfo({
      success: (e) => {
        let statusBar = 0;
        // #ifdef MP-WEIXIN
        // px转换到rpx的比例
        const pxToRpxScale = 750 / e.windowWidth
        statusBar = e.statusBarHeight * pxToRpxScale; // 状态栏的高度
        this.navbarHeight = statusBar + 44 * pxToRpxScale;
        // #endif
        let query = uni.createSelectorQuery().in(this);
        query
          .select("#feature-elevator-navigation")
          .boundingClientRect((data) => {
            // 当前元素距离顶部的高度
            this.topDis = data.top;
          })
          .exec();
      },
    });
    // 下拉刷新需要重置定位
    this.fixnavigation = false;
    this.$emit("handlePosition", 0);
  },
  methods: {
    // 点击电梯导航
    handelClick(index, item) {
      this.activeIndex = index;
      const { linkType, switch: islink, linkTitle, link } = item;
      if (islink && this.dataField.type == 1) {
        // 跳转链接
        if (linkType == 4) {
          // 自定义链接
          if (
            item.link.indexOf("pages/category/category") > -1 ||
            item.link.indexOf("pages/basket/basket") > -1 ||
            item.link.indexOf("pages/user/user") > -1 ||
            item.link.indexOf("pages/index/index") > -1 ||
            item.link.indexOf("pages/im-message/im-message") > -1
          ) {
            return uni.switchTab({
              url: item.link,
            });
          }
          if (
            item.link.indexOf("/packageDistribution") > -1 ||
            item.link.indexOf("/packageMemberIntegral") > -1
          ) {
            return util.checkAuthInfo(() => {
              uni.navigateTo({
                url: item.link,
              });
            });
          } else {
            return uni.navigateTo({
              url: item.link,
            });
          }
        } else if (linkType == 5) {
          // 微页面
          const pages = getCurrentPages();
          if (pages.length < 5) {
            return uni.navigateTo({
              url:
                "/pages/feature-index/feature-index0?renovationId=" +
                item.link +
                "&shopId=0" +
                "&showBack=" +
                true,
            });
          } else {
            return uni.redirectTo({
              url:
                "/pages/feature-index/feature-index0?renovationId=" +
                item.link +
                "&shopId=0",
            });
          }
        }
      } else {
        this.$emit("changeElevatorNavigation", item);
      }
    },
  },
};
</script>

<style>
.feature-elevator-navigation {
  padding: 16rpx 32rpx;
  margin: 12rpx 0;
  width: 100vw;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 1;
}
.elevator-navigation {
  display: flex;
  overflow-x: scroll;
}
.elevator-navigation-between {
  justify-content: space-between;
}
.elevator-navigation-item {
  margin: 0 32rpx;
  text-align: center;
  flex-shrink: 0;
  min-height: 70rpx;
}
.elevator-navigation-item:first-child {
  margin-left: 0;
}
.elevator-navigation-item:last-child {
  margin-right: 0;
}
.elevator-navigation-item image{
  width: 128rpx;
  height: 84rpx;
  margin: 0 8rpx;
}
.elevator-navigation-item:first-child image{
  margin-left: 0;
}
.elevator-navigation-item:last-child image{
  margin-right: 0;
}
.elevator-navigation-text {
  min-width: 140rpx;
  font-size: 28rpx;
  color: #3E3E40;
}
.elevator-navigation-text-active {
  font-size: 32rpx;
  font-weight: 500;
  color: #1767FF;
  position: relative;
}
.elevator-navigation-text-active::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -28rpx;
  height: 8rpx;
  width: 28rpx;
  background-color: #1767FF;
  border-radius: 20rpx 20rpx 0 0;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {  
  width: 10px !important;  
  height: 1px !important;  
}  
::-webkit-scrollbar-thumb {  
  background-color: none !important;  
}  
::-webkit-scrollbar-track { 
  box-shadow: none;  
  background: none !important;  
}


</style>