uView NoticeBar 滚动通知

简介: 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>
相关文章
|
6月前
|
JavaScript
vue全屏事件与关闭全屏事件
vue全屏事件与关闭全屏事件
247 0
|
6月前
|
Web App开发 JavaScript Android开发
Vue 项目触发移动软键盘搜索点击事件
Vue 项目触发移动软键盘搜索点击事件
155 0
uniapp 实现加载效果,消息提示框,模态框
uniapp 实现加载效果,消息提示框,模态框
552 0
uniapp组件库uview1的u-button的问题,u-button多次点击只触发事件一次
uniapp组件库uview1的u-button的问题,u-button多次点击只触发事件一次
340 0
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
134 0
|
3月前
|
JavaScript
Vue2通知提醒框(Notification)
这篇文章介绍了如何在Vue 3框架中创建一个通知提醒框(Notification)组件,支持自定义延时关闭、弹出位置和五种不同样式的消息提示。
Vue2通知提醒框(Notification)
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
102 4
|
6月前
|
移动开发 小程序 API
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
269 1
|
6月前
|
JavaScript
【UI】 cocomessage消息提示插件
【UI】 cocomessage消息提示插件
88 1