更新记录

1.0.0（2025-03-13） 下载此版本

发布初版

平台兼容性

uni-app

其他

NoticeBar 滚动通知条

组件名: xt-notice-bar

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <view>
            <view style="font-size: 28rpx">基础用法</view>
            <xt-notice-bar :text="list"></xt-notice-bar>
        </view>
        <view>
            <view style="font-size: 28rpx">步进模式</view>
            <xt-notice-bar :text="list" step></xt-notice-bar>
        </view>
        <view>
            <view style="font-size: 28rpx">纵向滚动</view>
            <xt-notice-bar direction="column" :text="list"></xt-notice-bar>
        </view>
        <view>
            <view style="font-size: 28rpx">自定义颜色</view>
            <xt-notice-bar :text="list" color="#ff4757" bgColor="#2f3542"></xt-notice-bar>
        </view>
        <view>
            <view style="font-size: 28rpx">自定义样式</view>
            <xt-notice-bar
                :text="list"
                :customStyle="{
                    borderRadius: '10rpx',
                    padding: '20rpx',
                    backgroundColor: '#2f3542'
                }"
            ></xt-notice-bar>
        </view>
        <view>
            <view style="font-size: 28rpx">左右插槽</view>
            <xt-notice-bar :show="show" :text="list" direction="column" @click="onclick" disableTouch>
                <template #left>
                    <view @click="left">
                        <xt-icon name="xt-icon-shengyin" color="#000"></xt-icon>
                    </view>
                </template>
                <template #right>
                    <xt-icon @click="close" name="xt-icon-close" color="#000"></xt-icon>
                </template>
            </xt-notice-bar>
            <xt-button style="margin-top: 20rpx" @click="close" size="mini">开启滚动条</xt-button>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list: ['滚动通知滚动通知滚动通知滚动通知', '第二条滚动通知'],
            show: true
        };
    },
    methods: {
        onclick(e) {
            console.log(e);
        },
        left() {
            console.log('点击了左边');
        },

        close() {
            this.show = !this.show;
        }
    }
};
</script>
<style lang="scss">
.xt {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}
</style>

API

Event