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>
相关推荐
归于尽2 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟2 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦2 分钟前
前端列表页大数据内存优化的思考
前端·面试
自由逐风3 分钟前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子4 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤7 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
欢乐时光c8 分钟前
常见请求头响应头的含义
前端·面试
wzyoung8 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户73087011793088 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥8 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端