更新记录

1.0.0（2024-12-04） 下载此版本

发布

平台兼容性

uni-app

其他

dl-textScroll

props属性

dataItem说明

Events事件

使用示例

<template>
    <view>
        <!-- 插槽使用 -->
        <dl-textScroll :data="data" class="textScroll-container" @select="select">
            <template #slotName1="{row}">
                <view >
                    <text>{{row.text}}</text>
                    <text style="color: green;">{{row.value}}</text>
                </view>
            </template>
            <template #slotName2="{row}">
                <view>
                    <text>{{row.text}}</text>
                    <text style="color: red;">{{row.value}}</text>
                </view>
            </template>
            <template #slotName3="{row}">
                <view>
                    <text>{{row.text}}</text>
                    <text >{{row.value}}</text>
                </view>
            </template>
        </dl-textScroll>

        <!-- 简单使用 -->
        <dl-textScroll :data="data2" :time="1000" class="textScroll-container"></dl-textScroll>
    </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const data = ref([])
    const data2 = ref([
        {
            text:'文本1'
        },
        {
            text:'文本2'
        },
        {
            text:'文本3'
        },
    ])
    setTimeout(()=>{
        //异步获取 data
        data.value = [
            {text:'今日预约人数：',slotName:'slotName1',value:100,},
            {text:'较昨日新增：',slotName:'slotName2',value:10,},
            {text:'本月预约人数：',slotName:'slotName3',value:1000,},
        ]
    },2000)
    const select = (row,index) => {
        uni.showToast({
            title:`index:${index}`
        })
    }
</script>

<style lang="scss" scoped>
.textScroll-container{
    background-color: #f8f7f8;
    color: #333333;
    padding: 20rpx;
}
</style>