小程序的作者：jiewen https://jiewen.run/archives/TinyTale

来了来了，经过跟jiewen老哥的友好交流，来了一个解决方案，我直接把通知栏给去掉了。

      <TnNoticeBar

        :data="configStore.notionData"

        left-icon="sound"

        left-icon-color="tn-grey"

        auto-hidden

        :direction="configStore.home?.notice.noticeType || 'horizontal'"

        bg-color="#fff"

        v-if="configStore.home?.notice.enableNotice" />

    </view>

这是jiewen大佬原来的代码

然后我改动后的首先在语法糖script setup那里添加这个调用

one这个源码我放在最后，文本可以自己改动

//一言调用

// 定义一个响应式变量来存储请求的数据

const oneData = ref('');

// 定义请求的URL

const url = '域名/one';

// 使用uni.request发送GET请求

uni.request({

  url: url, // 请求的URL

  method: 'GET',

  success: (res) => {

    console.log('请求成功，返回的数据:', res.data);

    // 确保返回的数据是字符串类型

    if (res.data && typeof res.data === 'string') {

      oneData.value = res.data;

    } else {

      console.error('返回的数据不是字符串类型');

    }

  },

  fail: (error) => {

    console.error('请求失败，错误信息:', error);

  }

});

//一言结束

接着是template部分

原代码

     <TnNoticeBar

        :data="configStore.notionData"

        left-icon="sound"

        left-icon-color="tn-grey"

        auto-hidden

        :direction="configStore.home?.notice.noticeType || 'horizontal'"

        bg-color="#fff"

        v-if="configStore.home?.notice.enableNotice" />

    </view>

改为

    <view class="notice-bar-container" v-if="oneData">
      <text class="notice-message">{{ oneData }}</text>

最后就是样式了，样式这方面可以自己改

<style scoped>

.notice-bar-container {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5px 10px;

  min-height: 30px;

  background-color: #f8f8f8;

  border-radius: 3px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  margin: 10px;

  width: 100%; /* 确保它填满其父元素的宽度 */

  overflow: hidden; /* 隐藏溢出的内容 */

  white-space: nowrap; /* 防止文本换行 */

}

.notice-message {

  font-size: 14px;

  color: #333;

  animation: marquee 10s linear infinite; /* 应用滚动动画 */

  max-width: 100%; /* 确保文本不会超出容器宽度 */

}

/* 添加滚动动画的关键帧 */

@keyframes marquee {

  0% { transform: translateX(100%); }

  100% { transform: translateX(-100%); }

}

</style>

2024-5-18更新另外一种方法，不用自己再做通知栏，直接借用之前的通知栏吧三个参数换掉就行， script setup部分也稍微调整下

第二种方法

script setup部分

// 定义一个响应式变量来存储请求的数据

const oneData = ref([]);

const url = '域名/one';

uni.request({

  url: url,

  method: 'GET',

  success: (res) => {

    console.log('请求成功，返回的数据:', res.data);

    // 确保返回的数据是字符串类型，并且将其转换为数组

    if (res.data && typeof res.data === 'string') {

      oneData.value = [res.data]; // 转换为数组

    } else {

      console.error('返回的数据不是字符串类型');

    }

  },

  fail: (error) => {

    console.error('请求失败，错误信息:', error);

  }

});

通知栏部分

      <TnNoticeBar

        :data="oneData"

        left-icon="sound"

        left-icon-color="tn-grey"

        auto-hidden

        :direction="oneData || 'horizontal'"

        bg-color="#fff"

        v-if="oneData" />

ONE源码

one.zip

最后预览效果