调整

YM

2024-04-26 3af382c2b9ddf2a8210b6477bb46b0945ce26a64

 src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue

@@ -1,21 +1,44 @@
<template>
   <view :class="{'uni-scroll-tab': scroll === true }" class="uni-tab ">
    <view
      v-for="(tab, index) in tabList"
      :key="index"
      :class="{
        'uni-tab-active': index === value,
        'uni-tab-scroll-item': scroll === true,
        ' uni-tab-scroll-active': index === value && scroll === true
      }"
      :style="[
        {
          color: index === value ? activeColor : defaultColor,
          backgroundColor: bgColor
        }
      ]"
         style="cursor: pointer;"
      @tap="itemClick(index, tab)"
      class="uni-tab-item"
    >
      <span
        v-if="tab.icon != undefined"
        class="iconfont mr5"
        :class="tab.icon"
      ></span>
      
      <view v-for="(tab,index) in tabList" :key="index"
         :class="{ 'uni-tab-active': index === value, 'uni-tab-scroll-item': scroll === true, ' uni-tab-scroll-active': index === value && scroll === true }"
         :style="[{color:index === value ? activeColor : defaultColor,backgroundColor: bgColor}]"
         @tap="itemClick(index,tab)" class="uni-tab-item">
         <span v-if="tab.icon != undefined" class="iconfont mr5" :class="tab.icon"></span>

         <text>{{rangeKey == '' ? tab.TabControl : tab[rangeKey]}}</text>
      <text>{{ rangeKey == "" ? tab.TabControl : tab[rangeKey] }}</text>
      </view>
      <view v-if="!scroll" :style="[{ right: barRight + '%', left : barLeft + '%', borderColor: activeColor }]"
         class="uni-tab-bar" :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"></view>
    <view
      v-if="!scroll"
      :style="[
        { right: barRight + '%', left: barLeft + '%', borderColor: activeColor }
      ]"
      class="uni-tab-bar"
      :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"
    ></view>
   </view>
</template>
<script>
   export default {
      name: 'uni-tab',
  name: "uni-tab",
      data() {
         return {
            average: 0,
@@ -35,36 +58,41 @@
               return [];
            }
         },
         bgColor: { //背景颜色
    bgColor: {
      //背景颜色
            type: String,
            default () {
               return '#FFFFFF';
        return "#FFFFFF";
            }
         },
         defaultColor: { //默认未选中文字颜色
    defaultColor: {
      //默认未选中文字颜色
            type: String,
            default () {
               return '#636363';
        return "#636363";
            }
         },
         activeColor: { //选中时文字颜色 线条颜色
    activeColor: {
      //选中时文字颜色 线条颜色
            type: String,
            default () {
               return '#000000';
        return "#000000";
            }
         },
         rangeKey: { // 当tabList为对象时 显示指定下标值
    rangeKey: {
      // 当tabList为对象时 显示指定下标值
            type: String,
            default () {
               return '';
        return "";
            }
         },
         scroll: { //横向滑动
    scroll: {
      //横向滑动
            type: Boolean,
            default () {
               return false;
            }
         },
    }
      },
      computed: {
         barLeft() {
@@ -72,9 +100,8 @@
         },
         barRight() {
            let index = this.tabList.length - this.value - 1;
            console.log(this.tabList.length,index * this.average);
            return index * this.average;
         },
    }
      },
      created() {
         this.average = 100 / this.tabList.length;
@@ -88,8 +115,8 @@
               this.back = false;
            }
            // this.value = index;
            this.$emit('update:value', index);
            this.$emit('change', {
      this.$emit("update:value", index);
      this.$emit("change", {
               tab: tab
            });
         }
@@ -122,7 +149,6 @@
      }

      .uni-tab-active {
			
         color: #1e9fff;
      }

@@ -139,11 +165,13 @@
      }

      .uni-tab-bar-forward {
         transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1),
      left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
      }

      .uni-tab-bar-backward {
         transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s,
      left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
      }
   }