tabsSwiper 全屏选项卡使用的注意事项

tabsSwiper 全屏选项卡使用的注意事项

1.如果要改变底部滑块的样式的样式并且做到滑块的位置一直跟随在tab标签底部，需要改动tabsSwiper的源码中的template的内容，在node-module下找到uview-ui下的components下的u-tabs-swiper.vue文件，改动如下

<template>
    <view
        class="u-tabs"
        :style="{
            zIndex: zIndex,
            background: bgColor,
        }"
    >
        <scroll-view
            scroll-x
            class="u-scroll-view"
            :scroll-left="scrollLeft"
            scroll-with-animation
            :style="{ zIndex: zIndex + 1 }"
        >
            <view
                class="u-tabs-scroll-box"
                :class="{ 'u-tabs-scorll-flex': !isScroll }"
            >
                <view
                    class="u-tabs-item"
                    :style="[tabItemStyle(index)]"
                    v-for="(item, index) in getTabs"
                    :key="index"
                    :class="[preId + index]"
                    @tap="emit(index)"
                >
                    <u-badge
                        :count="item[count] || item['count'] || 0"
                        :offset="offset"
                        size="mini"
                    ></u-badge>
                    {{ item[name] || item["name"] }}
                    <view
                        v-if="showBar"
                        v-show="index == current"
                        class="u-scroll-bar"
                        :style="[tabBarStyle]"
                    ></view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

2.如何改变底部滑块样式:

 <u-tabs-swiper
    ref="uTabs"
    :list="list"
    :is-scroll="true"
    :current="current"
    @change="tabsChange"
    bold
    active-color="#333333"
    inactive-color="#6F6F6F"
    swiperWidth="750"
    :show-bar="true"
    :active-item-style="activeStyle"
    bar-width=""
    bar-height="12"
    :bar-style="barStyle"
>
</u-tabs-swiper>

data() {
	return {
		 barStyle: {
                background: "linear-gradient(90deg, #0a63f1 0%, #eef5ff 100%)",
                width: "165rpx",
      	 },
	}
}

methods: {
	animationfinish(e) {
       let current = e.detail.current;
       this.$refs.uTabs.setFinishCurrent(current);
       this.swiperCurrent = current;
       this.current = current;
       if (current == 1) {
           let barWidth =
               document.getElementsByClassName("u-scroll-bar")[1];
           barWidth.style.setProperty(
               "width",
               `${90 * dpr}px`,
               "important"
           );
       }
       if (current == 2) {
           let barWidth =
               document.getElementsByClassName("u-scroll-bar")[2];
           barWidth.style.setProperty(
               "width",
               `${105 * dpr}px`,
               "important"
           );
       }
   },
}

其中，根据比例改变滑块宽度的dpr变量在index.html文件中定义：

<script>
  	window.dpr = (document.documentElement.clientWidth / 375).toFixed(2); // 实际像素块丢进理想像素块中，平均每个理想块可容纳多少实际像素块
</script>

3.在滑动swiper的时候，如果切换了组件后数据没有更新，则需要在animationfinish里先清空上一个组件的数据

animationfinish(e) {
    let current = e.detail.current;
    this.$refs.uTabs.setFinishCurrent(current);
    if (current != this.current) {
        vm.status = "loading";
        vm.pageNum = 1;
        vm.keywordList = [];
        vm.videoList = [];
        this.swiperCurrent = current;
        this.current = current;
        switch (current) {
          case 0:
            vm.activeName = "2";
            break;
          case 1:
            vm.activeName = "3";
            break;
          case 2:
            vm.activeName = "4";
            break;
          case 3:
            vm.activeName = "5";
            break;
          default:
            break;
        }
        vm.getSearchData();
},