更新记录
1.0.1(2023-11-01) 下载此版本
更新
1.0.0(2023-10-31) 下载此版本
上传
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
mosowe-move
相比mosowe-text-scroll-row组件
-
参数减少,使用slot插槽全自定义每一项结构
-
可以多行展示,mosowe-text-scroll-row组件多行展示需要引入多次
-
可以Y轴滚动
-
滚动效果比mosowe-text-scroll-row组件流畅
属性
props | 类型 | 说明 | 默认 |
---|---|---|---|
list | Array | 一维数组列表 | [] |
row | number | 滚动行数,即将list数据平均几行展示,每行数据不会重复 | 1 |
speed | number | 滚动速度,建议10-40,毫秒, | 30 |
delay | number | 组件延时,单行的错位延时效果可以使用slot插槽处理 | 0 |
initPosition | string | 初始位置,可选[''left','right','top','bottom'] | left |
y | boolean | Y轴滚动,此时row失效,Y轴滚动时只展示一列,从下向上滚动 | false |
slot
slot | 说明 |
---|---|
default | 作用域参数:{row,rowIndex,colIndex},row:当前项数据,rowIndex:当前项所在行数索引,colIndex:当前项所在列数索引 |
示例
<template>
<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>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const list = ref(
Array.from({ length: 30 }).map((item, index) => '哈'.repeat(1 + Math.floor(Math.random() * 10)) + index)
);
</script>
<style lang="scss">
.item {
margin-right: 20rpx;
font-size: 20rpx;
line-height: 40rpx;
}
</style>