今天设计小姐姐找到我，给我看一个某东APP的图片滚动效果~~~

大致效果：

图片大概4-8张，左右滑动，下方有一个滑块会根据图片的滑动而滑动。图片滑动到左右一张时，下方滑块也刚好滑到最右边。

我第一反应本来是想拒绝的，但是我本身对这个功能实现也挺好奇。

于是，有了这篇文章的诞生。

正文开始

老规矩，先上成品展示

技术栈

使用 Uniapp + Taliwind CSS, tailwind css太香了，用习惯之后，可以省去很大一部分写css的时间，而且还提供了一些兼容苹果和安卓手机顶部状态栏的属性。

不是这个技术栈的小伙伴也可以看这篇文章哒~~~

ps： 自己手写css + 使用js原生滚动事件获取”主区域”偏移量

思路

这里梳理下大致思路：

• 用scroll-view放图片盒子

• 写一个滑块区域，用公式算出滑块宽度和滑块背景宽度（下方有具体描述）

• scroll-view左滑/右滑时，根据scroll-view提供回调事件的位移距离等参数，算出滑块的位移，让滑块移动

示例代码

// 图片区域
<scroll-view
        v-if="myChannel.length > 0"
        scroll-x="true"
        class="w-[calc(100vw-60px)] whitespace-nowrap channel-scroll"
        @scroll="channelScroll"
      >
        <view
          v-for="(item, index) in orderChannel"
          :key="index"
          class="inline-flex flex-col items-center justify-between text-12 cl161510 w-80 text-center py-12"
          @click="onChannelClick(item)"
        >
          <image class="w-24 h-24" mode="aspectFit" :src="item.icon"></image>
          <view class="mt-4">测试一</view>
        </view>
      </scroll-view>
      
      // 滑块区域
      <view
        v-if="orderChannel.length > 3"
        class="w-30 h-4 mx-auto rounded-3xl bg-gray-200"
      >
        <view
          class="h-4 bg-yellow-300 rounded-3xl"
          :style="{
            width: percent + 'px',
            transform: `translateX(${scrollLeft}px)`
          }"
        />
      </view>

export default {
    name: 'MineService',
    data() {
      return {
        percent: 0,
        scrollLeft: 0
      }
    },
    mounted() {
      this.percent =
        30 *
        ((uni.getSystemInfoSync().windowWidth - 60) /
          (80 * this.orderChannel.length))
    },
    methods: { 
      channelScroll(e) {
        this.scrollLeft = 30 * (e.detail.scrollLeft / e.detail.scrollWidth)
      },
    }
}

关键细节

• 30：滑块所处灰色背景的宽度

• 60：scroll-view内容之外的区域宽度

• 80：单个小盒子的宽度

• 通过overflow:hidden 隐藏一屏之外的盒子，如下图

• channelScroll: 监听左右滑动事件，得到主区域滑动距离和主区域的总宽度，通过公式计算出滑块的位移距离

  公式：30 * (主区域滑动距离 / 主区域总宽度)

  主区域总宽度：下图蓝色框区域

完结

好啦，大功告成啦~~~

这个功能属于看着有点费事的那种，小伙伴工作如果遇到类似功能，可以直接CV大法，多出来的时间又可以摸鱼啦~~~

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。

最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。