uView NoticeBar 滚动通知

该组件用于滚动通告场景,有多种模式可供选择

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过text参数设置需要滚动的内容

    <template> <view> <u-notice-bar :text="text1"></u-notice-bar> </view> </template> <script> export default { data() { return { text1: 'uView UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用' } } } </script>

copy

#可关闭

通过mode配置为closable让右侧显示关闭按钮

复制代码
<template>
  <view>
    <u-notice-bar :text="text1" mode="closable"></u-notice-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用'
      }
    }
  }
</script>

copy

#配置滚动速度和跳转

  • speed可配置横向滚动速度

  • url可配置跳转

    <template> <view> <u-notice-bar :text="text1" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></u-notice-bar> </view> </template> <script> export default { data() { return { text1: 'uView UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用' } } } </script>
相关推荐
读书点滴4 分钟前
笨方法学python -练习14
java·前端·python
Mintopia11 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖16 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia22 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农26 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee10128 分钟前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye29 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤34 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子38 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html