更新记录

1.0.2（2024-01-31）

fix bug

1.0.1（2024-01-06）

更新

1.0.0（2024-01-06）

初始化插件

平台兼容性

next-notice-babr

注意

1.该插件不接受问题反馈，使用需要一定的门槛，有问题也请不要反馈；作者认为只要是一个合格的前端，这些问题的存在在这个插件都是合理的；

2.新手勿用；

属性

slot

示例 vue3

<template>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>demo1</text></view>
    <view class="notice-bar">
        <next-notice-bar :y="true" initPosition="top" :row="3" :speed="40" :list="noticeList">
            <template #default="{ row, rowIndex, colIndex }">
                <view class="notice-bar-item">                                      
                    <text space="nbsp">{{ colIndex + 1 }}.&nbsp;{{ row }}</text>
                </view>
            </template>
        </next-notice-bar>
    </view>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>demo2</text></view>
    <view class="notice-bar">
        <next-notice-bar :y="true" initPosition="bottom" :row="3" :speed="40" :list="noticeList">
            <template #default="{ row, rowIndex, colIndex }">
                <view class="notice-bar-item">                                      
                    <text space="nbsp">{{ colIndex + 1 }}.&nbsp;{{ row }}</text>
                </view>
            </template>
        </next-notice-bar>
    </view>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>demo3</text></view>
    <view class="notice-bar">
        <next-notice-bar :y="false" initPosition="right" :row="2" :speed="30" :list="noticeList">
            <template #default="{ row, rowIndex, colIndex }">
                <view class="notice-bar-item">                                      
                    <text space="nbsp">{{ colIndex + 1 }}.&nbsp;{{ row }}</text>
                </view>
            </template>
        </next-notice-bar>
    </view>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>demo4</text></view>
    <view class="notice-bar">
        <next-notice-bar :y="false" initPosition="left" :row="2" :speed="30" :list="noticeList">
            <template #default="{ row, rowIndex, colIndex }">
                <view class="notice-bar-item">                                      
                    <text space="nbsp">{{ colIndex + 1 }}.&nbsp;{{ row }}</text>
                </view>
            </template>
        </next-notice-bar>
    </view>
</template>
<script setup lang="ts">
import {ref, unref} from "vue"

const noticeList = ref([
    '征程这些伟大精神 串连起中国共产党人的精神谱系;',
    '增强水运发展新动能 前5月港口货物吞吐量增长7.9%新利润测试;',
    '多地持续高温 各地采取措施积极应对;',
    '中非经贸博览会见证中非合作深度;',
    '国安家安得民心 保驾护航促治兴;',
    '官网不拥有其著作权，亦不承担相应法律责任;'
])
</script>
<style lang="scss">
    .notice-bar {
        // padding-top: 20rpx;
        height: 160rpx;
        border: 1rpx solid #f0f0f0;
        margin: 0 20rpx;
    }
    .notice-bar .notice-bar-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        min-height: 80rpx;
        // font-size: 30rpx;
        // line-height: 60rpx;
    }
</style>

预览

功能预览