更新记录

1.0.2（2023-07-10） 下载此版本

去除无效代码

1.0.1（2023-07-05） 下载此版本

修改历史耦合

1.0.0（2023-07-05） 下载此版本

1.0.0

平台兼容性

介绍

横向滚动条，支持滚动进度条，支持逐帧滚动，支持多图预览，支持 nvue 和 vue

建议在移动端使用，

属性

    distance?: number | null; // 移动距离，不传默认为滑动模式
    viewWidth: number; // 视图宽度
    viewHeight: number; // 视图高度
    contentWidth: number; // 内容宽度，用于计算滚动边际
    imgList?: string[] | null; // 图片数据，开启图片预览功能，默认不开启,
    showBar?: boolean; // 是否展示底部滚动条
    color?: string; // 主色
    bgColor?: string; // 背景色
    align?: "center" | "between"; // 滚动条位置

示例

<template>
      <ymScrollx
        :viewWidth="500"
        :viewHeight="750"
        :distance="400 + 20"
        :imgList="imgTest"
        :contentWidth="imgTest.length * (400 + 20)"
      >
          <view style="display:flex;'flex-direction': row;">
            <view
              style="display:flex;'flex-direction': row;"
              v-for="(item, index) in imgTest"
              :key="index"
            >
              <image style="width: 400rpx; height: 750rpx" :src="item" />
              <view style="width: 20rpx"></view>
            </view>
          </view>
      </ymScrollx>
</template>

<script setup lang="ts">
import ymScrollx from from "@/components/ym-scrolllx/ym-scrolllx.vue";
const imgTest = new Array(10).fill("https://picsum.photos/400/500");
</script>