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>
相关文章
|
22天前
|
JavaScript
vue全屏事件与关闭全屏事件
vue全屏事件与关闭全屏事件
84 0
|
22天前
|
Web App开发 JavaScript Android开发
Vue 项目触发移动软键盘搜索点击事件
Vue 项目触发移动软键盘搜索点击事件
69 0
|
10月前
uniapp 实现加载效果,消息提示框,模态框
uniapp 实现加载效果,消息提示框,模态框
208 0
|
10月前
uniapp组件库uview1的u-button的问题,u-button多次点击只触发事件一次
uniapp组件库uview1的u-button的问题,u-button多次点击只触发事件一次
225 0
|
10月前
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
227 0
|
JavaScript
vue的监听键盘事件的快捷方法
在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: 对于一些常用键,还提供了按键别名: 全部的按键别名:  .enter  .tab  .delete (捕获“删除”和“退格”键)  .esc  .space  .up  .down  .left  .right 修饰键:  .ctrl  .alt  .shift  .meta Do something 与按键别名不同的是,修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。
2744 0
|
22天前
|
JavaScript
vue中多组件调用,实现上下分屏,上下拖动
vue中多组件调用,实现上下分屏,上下拖动
|
22天前
|
移动开发 小程序 API
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
25 1
|
22天前
|
自然语言处理 JavaScript 前端开发
vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载
vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载
44 2
|
10月前
|
JavaScript API 开发者
uniapp滚动加载 下拉刷新
在日常开发中,滚动加载和下拉刷新是非常常见的功能,页面数据过多时,需要滚动加载优化性能,本篇技术分享博客将介绍如何在uniapp中实现滚动加载和下拉刷新。至此,我们已经成功地实现了滚动加载和下拉刷新两种常见的移动端功能。大家可以进行扩充或者留言交流!通过以上示例代码,我们可以看到uniapp提供了非常方便的API来实现这些功能,使得开发者可以更加专注于业务逻辑的实现。
115 0

热门文章

最新文章