更新记录

1.0.2（2025-02-27）

优化

1.0.1（2023-11-01）

更新

1.0.0（2023-10-31）

上传

平台兼容性

mosowe-move

相比 mosowe-text-scroll-row 组件

1. 参数减少，使用 slot 插槽全自定义每一项结构

2. 可以多行展示，mosowe-text-scroll-row 组件多行展示需要引入多次

3. 可以 Y 轴滚动

4. 滚动效果比 mosowe-text-scroll-row 组件流畅

属性

slot

示例

<template>
  <view>
    <view class="page-item">
      <view class="h-title">默认滚动</view>
      <mosowe-move :list="list">
        <template #default="{ row, rowIndex, colIndex }">
          <view class="item">{{ rowIndex }}-{{ colIndex }}:{{ row }}</view>
        </template>
      </mosowe-move>
    </view>
    <view class="page-item">
      <view class="h-title">多行滚动（row="3"）</view>
      <mosowe-move
        :list="list"
        :row="3">
        <template #default="{ row, rowIndex, colIndex }">
          <view class="item">{{ rowIndex }}-{{ colIndex }}:{{ row }}</view>
        </template>
      </mosowe-move>
    </view>
    <view class="page-item">
      <view class="h-title">设置速度（speed="10"）值越小越快</view>
      <mosowe-move
        :list="list"
        :row="3"
        :speed="10">
        <template #default="{ row, rowIndex, colIndex }">
          <view class="item">{{ rowIndex }}-{{ colIndex }}:{{ row }}</view>
        </template>
      </mosowe-move>
    </view>
    <view class="page-item">
      <view class="h-title">设置右边起步（initPosition="right"）</view>
      <mosowe-move
        :list="list"
        :row="3"
        :speed="10"
        initPosition="right">
        <template #default="{ row, rowIndex, colIndex }">
          <view class="item">{{ rowIndex }}-{{ colIndex }}:{{ row }}</view>
        </template>
      </mosowe-move>
    </view>
    <view class="page-item">
      <view class="h-title">图片滚动（与设备分辨率有关可能会出现缝隙）</view>
      <mosowe-move :list="images">
        <template #default="{ row, rowIndex, colIndex }">
          <image
            :src="row"
            mode="aspectFill"
            style="width: 100rpx; height: 100rpx; display: block" />
        </template>
      </mosowe-move>
    </view>
    <view class="page-item">
      <view class="h-title">垂直滚动</view>
      <mosowe-move
        :list="list"
        y
        height="300rpx">
        <template #default="{ row, rowIndex, colIndex }">
          <view class="item">{{ rowIndex }}-{{ colIndex }}:{{ row }}</view>
        </template>
      </mosowe-move>
    </view>
  </view>
</template>

<script
  setup
  lang="ts">
  import { ref } from 'vue';
  import image from '@/static/1.jpg';

  const list = ref(
    Array.from({ length: 30 }).map((item, index) => '哈'.repeat(1 + Math.floor(Math.random() * 10)) + index)
  );
  const images = Array.from({ length: 30 }).map((item, index) => image);
</script>

<style lang="scss">
  .item {
    margin-right: 20rpx;
    font-size: 32rpx;
    line-height: 40rpx;
  }
</style>