ccy_DIB/pages/commercialBI/components/sliderPage.vue

<template>
  <!--  <view class="sliderPage">-->
  <!--    <view class="slider">-->
  <!--      <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
  <!--    </view>-->
  <!--  </view>-->

  <view class="scrollPage">
    <scroll-view class="scrollBox" 	scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
      <view :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i"  @click="handleToDetail(i)">{{item}}</view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: "sliderPage",
  data() {
    return {
      pageList: ["基础信息", "车流画像", "客群画像", "经营画像", "交易画像", "业态品牌", "考核考评", "日常巡检"],
      urlList: [
        '/pages/map/detail',
        '/pages/commercialBINew/carPortrait',
        '/pages/commercialBI/guestPortrait',
        '/pages/commercialBI/managePortrait',
        '/pages/commercialBI/businessPortrait',
        '/pages/commercialBI/formatPortraitBI',
        `/pages/examine/detail?type=${1}`,
        `/pages/examine/detail?type=${2}`,
      ],// 跳转地址
      urlListYD: [
        '/pages/map/detail',
        '/pages/commercialBINew/carPortrait',
        '/pages/commercialBI/guestPortrait',
        '/pages/commercialBI/managePortrait',
        '/pages/commercialBI/businessPortrait',
        '/pages/commercialBI/formatPortraitBI',
        `/pages/newamine/index?type=${1}&comePage=slider`,
        `/pages/newamine/index?type=${2}&comePage=slider`,
      ],// 跳转地址YD
      selectIndex: 0
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  watch: {
    index: {
      handler(value) {
        this.selectIndex = value
      },
      immediate: true
    },
  },
  onLoad() {

  },
  methods: {
    handleToDetail(i) {
      console.log('i', i)
      this.selectIndex = i
      let storeServiceInfo = uni.getStorageSync('currentService')
      if (storeServiceInfo.SERVERPART_NAME==='安徽驿达'){
        uni.navigateTo({
          url: this.urlListYD[i]
        })
      }else{
        uni.redirectTo({
          url: this.urlList[i]
        })
      }

    }
  }
}
</script>

<style scoped lang="scss">
.sliderPage {
  width: 100%;
  height: 16rpx;
  display: flex;
  justify-content: center;
  padding-top: 8rpx;
  background: #fff;

  .slider {
    width: 120rpx;
    height: 8rpx;
    background: #e0dfdf;
    border-radius: 4rpx;
    position: relative;

    .rate {
      position: absolute;
      top: 0;
      height: 100%;
      background: #786B6C;
      border-radius: 4rpx;
      width: calc(100% / 8);
    }
  }
}

.scrollPage {
  width: 100%;
  height: 56rpx;
  box-sizing: border-box;
  padding: 0 16rpx;

  .scrollBox {
    width: 100%;
    height: 100%;
    white-space: nowrap;

    .scrollItem {
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #6F747A;
      line-height: 40rpx;
    }

    .selectScroll0 {
      color: #F26036;
      position: relative;
    }

    .selectScroll0:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #F26036;
    }

    .selectScroll1 {
      color: #1E67FF;
      position: relative;
    }

    .selectScroll1:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #1E67FF;
    }

    .selectScroll2 {
      color: #008649;
      position: relative;
    }

    .selectScroll2:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #008649;
    }

    .selectScroll3 {
      color: #6146F8;
      position: relative;
    }

    .selectScroll3:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #6146F8;
    }

    .selectScroll4 {
      color: #E57B00;
      position: relative;
    }

    .selectScroll4:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #E57B00;
    }

    .selectScroll5 {
      color: #4C43FF;
      position: relative;
    }

    .selectScroll5:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #4C43FF;
    }

    .selectScroll6 {
      color: #975EF5;
      position: relative;
    }

    .selectScroll6:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #975EF5;
    }

    .selectScroll7 {
      color: #975EF5;
      position: relative;
    }

    .selectScroll7:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #975EF5;
    }
  }
}
</style>