slider-in-swiper.uvue 8.9 KB
Newer Older
H
hdx 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
<template>
  <view class="swiper-list">
    <scroll-view ref="tabScroll" class="swiper-tabs" direction="horizontal" :show-scrollbar="false">
      <view class="flex-row">
        <text ref="swipertab" space="nbsp" class="swiper-tabs-item"
          :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''" v-for="(item, index) in swiperList" :key="index"
          @click="onTabClick(index)">
          {{item.title}}
        </text>
      </view>
      <view ref="indicator" class="swiper-tabs-indicator"></view>
    </scroll-view>
    <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
      @animationfinish="onSwiperAnimationfinish">
      <swiper-item class="swiper-item" v-for="(_, index) in swiperList" :key="index">
        <text class="uni-title">显示当前value</text>
        <slider :value="50" :show-value="true" />

        <text class="uni-title">设置步进:step=10跳动</text>
        <slider :value="60" :step="10" />

        <text class="uni-title">浮点步进:step=0.01跳动</text>
        <slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />

        <text class="uni-title">设置最小/最大值</text>
        <slider :value="100" :min="50" :max="200" :show-value="true" />

        <text class="uni-title">不同颜色和大小的滑块</text>
        <slider id="slider-custom-color-and-size" :value="sliderValue" :backgroundColor="sliderBackgroundColor"
          :activeColor="sliderActiveColor" :activeBackgroundColor="sliderActiveColor" :blockColor="sliderBlockColor"
          :foreColor="sliderBlockColor" :block-size="sliderBlockSize" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  type SwiperTabsItem = {
    x : number,
    w : number
  }

  type SwiperViewItem = {
    title : string,
  }

  /**
   * 根据权重在两个值之间执行线性插值.
   * @constructor
   * @param {number} value1 - 第一个值,该值应为下限.
   * @param {number} value2 - 第二个值,该值应为上限.
   * @param {number} amount - 应介于 0 和 1 之间,指示内插的权重.
   * @returns {number} 内插值
   */
  function lerpNumber(value1 : number, value2 : number, amount : number) : number {
    return (value1 + (value2 - value1) * amount)
  }

  export default {
    data() {
      return {
        swiperList: [] as SwiperViewItem[],
        swiperIndex: 0,
        tabScrollView: null as null | UniElement,
        indicatorNode: null as null | UniElement,
        animationFinishIndex: 0,
        swiperWidth: 0,
        swiperTabsRect: [] as SwiperTabsItem[],
        sliderValue: 50,
        sliderBlockSize: 20,
        sliderBackgroundColor: "#000000",
        sliderActiveColor: "#FFCC33",
        sliderBlockColor: "#8A6DE9",
      }
    },
    onLoad() {
      // 初始化 5 个页签,宽度依次递增,用于演示在滑动 swiper 过程中指示线宽度的线性变化
      for (let i = 0; i < 3; i++) {
        const space = " ".repeat(i)
        this.swiperList.push({
          title: "Tab " + space + i
        } as SwiperViewItem)
      }
    },
    onReady() {
H
hdx 已提交
86 87 88 89 90 91 92 93
      this.tabScrollView = this.$refs['tabScroll'] as UniElement;
      this.indicatorNode = this.$refs['indicator'] as UniElement;
      (this.$refs["swiper"] as UniElement).getBoundingClientRectAsync()!.then((res : DOMRect) : Promise<void> => {
        this.swiperWidth = res.width
        return this.cacheTabItemsSize()
      }).then(() => {
        this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
      });
H
hdx 已提交
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
    },
    methods: {
      /**
       * 每个页签的点击事件,点击后设置当前 swiper.
       * @constructor
       * @param {number} index - 当前索引,该值应介于 0 和 最大数量之间.
       */
      onTabClick(index : number) {
        this.setSwiperIndex(index, false)
      },
      onSwiperTransition(e : SwiperTransitionEvent) {
        // 微信 skyline 每项完成触发 Animationfinish,偏移值重置
        // 微信 webview 全部完成触发 Animationfinish,偏移值累加
        // 在滑动到下一个项的过程中,再次反向滑动,偏移值递减
        // uni-app-x 和 微信 webview 行为一致

        const offset_x = e.detail.dx

        // 计算当前索引并重置差异
        const current_offset_x = offset_x % this.swiperWidth
        const current_offset_i = offset_x / this.swiperWidth
        const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')

        // 计算目标索引及边界检查
        let move_to_index = current_index
        if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
          move_to_index += 1
        } else if (current_offset_x < 0 && move_to_index > 0) {
          move_to_index -= 1
        }

        // 计算偏移百分比
        const percentage = Math.abs(current_offset_x) / this.swiperWidth

        // 通知更新指示线
        if (current_index != move_to_index) {
          this.updateTabIndicator(current_index, move_to_index, percentage)
        }
      },
      /**
       * Swiper滑动动画结束事件.
       */
      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
        this.setSwiperIndex(e.detail.current, true)

        // 记录上次的索引位置
        this.animationFinishIndex = e.detail.current
      },
      /**
       * 缓存所有页签的左边距和宽度,用于计算指示线在移动过程中的线性变化.
       */
H
hdx 已提交
145 146 147 148 149 150 151 152 153 154 155
      async cacheTabItemsSize() {
        this.swiperTabsRect.length = 0;
        const tabs = this.$refs["swipertab"] as UniElement[]
        for (let i = 0; i < tabs.length; i++) {
          const element = tabs[i];
          const rect = await element.getBoundingClientRectAsync()!
          this.swiperTabsRect.push({
            x: rect.left,
            w: rect.width
          } as SwiperTabsItem)
        }
H
hdx 已提交
156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
      },
      /**
       * 设置当前 swiper 选中的索引值.
       * @constructor
       * @param {number} index - 当前索引,该值应介于 0 和 最大数量之间.
       * @param {boolean} updateIndicator - 是否更新指示线.
       */
      setSwiperIndex(index : number, updateIndicator : boolean) {
        if (this.swiperIndex === index) {
          return
        }

        this.swiperIndex = index

        if (updateIndicator) {
          this.updateTabIndicator(index, index, 1)
        }
      },
      /**
       * 更新页签指示线的位置和宽度.
       * @constructor
       * @param {number} current_index - 当前索引,该值应介于 0 和 最大数量之间.
       * @param {number} move_to_index - 目标索引,该值应介于 0 和 最大数量之间.
       * @param {number} percentage - 偏移百分比,应介于 0 和 1 之间,用于计算在移动过程中的线性值.
       */
      updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
        const current_size = this.swiperTabsRect[current_index]
        const move_to_size = this.swiperTabsRect[move_to_index]

        // 计算指示线 位置 和 宽度 在移动过程中的线性值
        const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
        const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)

        // 通过 transform 更新指示线,避免重排版
        // #ifdef APP
        const x = indicator_line_x + indicator_line_w / 2
        this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
        // #endif
H
hdx 已提交
194
        // #ifdef WEB || MP
H
hdx 已提交
195 196 197 198 199 200 201
        // TODO chrome windows系统 transform scaleX渲染bug
        const x = indicator_line_x
        this.indicatorNode?.style?.setProperty('width', `${indicator_line_w}px`)
        this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px)`)
        // #endif

        // 滚动到水平中心位置
H
hdx 已提交
202 203 204 205 206 207 208 209 210 211
        const scroll_x = x - this.swiperWidth / 2
        // app 平台后续支持 scrollTo()
        // #ifndef MP-WEIXIN
        this.tabScrollView!.scrollLeft = scroll_x
        // #endif
        // #ifdef MP-WEIXIN
        this.tabScrollView!.scrollTo({
          left: scroll_x
        })
        // #endif
H
hdx 已提交
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
      }
    }
  }
</script>

<style>
  .flex-row {
    flex-direction: row;
    align-self: flex-start;
  }

  .swiper-list {
    flex: 1;
  }

  .swiper-tabs {
    background-color: #ffffff;
  }

  .swiper-tabs-item {
    color: #555;
    font-size: 16px;
    padding: 12px 25px;
    white-space: nowrap;
  }

  .swiper-tabs-item-active {
    color: #007AFF;
  }

  .swiper-tabs-indicator {
    width: 1px;
    height: 2px;
    background-color: #007AFF;
  }

  .swiper-view {
    flex: 1;
  }

  .swiper-item {
    flex: 1;
    padding: 15px;
  }
</style>