uniapp(vue)手写一个swiper

（由于加载首页数据，不能实现无感加载swiper----并不是bug但是用户反馈加载速度慢）

    <view
      style="background:rgb(237,237,237);"
      class="swiper"
    >
      <view class="uni-swiper-wrapper">
        <view class="uni-swiper-slides">
        <!-- 滑动隐藏显示的内容 -->
        <transition name="slide">
          <view
            class="swiper-item"
            v-if="showIndex===0"
            key="element"
            @touchstart="touchstartEvent"
            @touchend="touchendEvent"
          >
            <view
              style="height: 100rpx!important;width:20%!important;"
              v-for="(item, index) in funcs.slice(0,5)"
              :index="index"
              :key="index"
            >
              <view
                class="grid-item-box"
                @click="selectFunction(item)"
              >
                <image
                  :src=" item.url"
                  class="image"
                  mode="aspectFill"
                />
                <text class="text">{{ item.text}}</text>
              </view>
            </view>
          </view>
    </transition>
    <!-- 滑动隐藏显示的内容 -->
    <transition name="slide">
          <view
            class="swiper-item"
            v-if="showIndex===1"
            @touchstart="touchstartEvent"
            @touchend="touchendEvent"
          >
            <view
              style="height: 100rpx!important;width:20%!important;"
              v-for="(item, index) in funcs.slice(5,10)"
              :index="index"
              :key="index"
            >
              <view
                class="grid-item-box"
                @click="selectFunction(item)"
              >
                <image
                  :src=" item.url"
                  class="image"
                  mode="aspectFill"
                />
                <text class="text">{{ item.text}}</text>
              </view>
            </view>
          </view>
        </transition>
        <!-- 滑动隐藏显示的内容 -->
        <transition name="slide">
          <view
            class="swiper-item"
            v-if="showIndex===2"
            @touchstart="touchstartEvent"
            @touchend="touchendEvent"
          >
            <view
              style="height: 100rpx!important;width:20%!important;"
              v-for="(item, index) in funcs.slice(10)"
              :index="index"
              :key="index"
            >
              <view
                class="grid-item-box"
                @click="selectFunction(item)"
              >
                <image
                  :src=" item.url"
                  class="image"
                  mode="aspectFill"
                />
                <text class="text">{{ item.text}}</text>
              </view>
            </view>
          </view>
       </transition>
        </view>
        <div class="uni-swiper-dots uni-swiper-dots-horizontal">
            <div
              class="uni-swiper-dot"
              :class="showIndex===index?'uni-swiper-dot-active':''"
              v-for="(item, index) in 3"
              :index="index"
              :key="index"
              @click="clickSwiper(index)"
            >
            </div>
        </div>
      </view>
    </view>

    clickSwiper(index) {
      this.showIndex = index
    },    
    touchstartEvent(e) {
        console.log('touchstartEvent', this.showIndex,e)
        this.touchStartX = e.touches[0].clientX;  
        this.touchStartY = e.touches[0].clientY;
      
    },
    touchendEvent(e) {
      console.log('touchendEvent',this.showIndex)
      console.log("触摸结束")  
      let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
      let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
      if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
          if (deltaX >= 0) {  
              console.log("右滑")
              this.showIndex --
              if(this.showIndex===-1) this.showIndex=2
                console.log("右滑结束", this.showIndex)
              
          } else {  
              console.log("左滑")  
              this.showIndex ++
              if(this.showIndex===3) this.showIndex=0
               console.log("左滑结束", this.showIndex)
          }  
      } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
          if (deltaY < 0) {  
              console.log("上滑")  
          } else {  
              console.log("下滑")  
          }  
      } else {  
          console.log("可能是误触！")  
      } 
    },

    /* 定义展开时的样式 */
    .slide-enter-active, .slide-leave-active {
      will-change: transform; /* 提前告知浏览器该属性会发生变化，从而优化性能 */
    }
     
    .slide-enter, .slide-leave-to {
      // opacity: 0; /* 透明度为0，表示完全隐藏 */
      // max-height: 0px; /* 高度为0，表示完全隐藏 */
      transform: translateX(-100%);
    }

.swiper {

padding-top: 8rpx;

height: 160rpx;

// margin-top: 40rpx;

position: fixed;

left: 0;

right: 0;

bottom: 114rpx;

}

.swiper-item {

display: flex;

align-items: center;

justify-content: space-between;

transition: all 0.5s ease; /* 添加过渡效果 */

}

.uni-swiper-dots-horizontal {

left: 50%;

bottom: 10px;

text-align: center;

white-space: nowrap;

-webkit-transform: translate(-50%);

transform: translate(-50%);

}

.uni-swiper-dots {

position: absolute;

font-size: 0;

}

.uni-swiper-dot {

display: inline-block;

width: 8px;

height: 8px;

cursor: pointer;

-webkit-transition-property: background-color;

transition-property: background-color;

-webkit-transition-timing-function: ease;

transition-timing-function: ease;

background: rgba(0, 0, 0, 0.3);

background-color: rgba(0, 0, 0, 0.3);

border-radius: 50%;

margin-left: 10rpx;

}

.uni-swiper-dot-active {

background-color: rgb(11, 121, 236) !important;

}