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>
相关推荐
li理2 分钟前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端
前端赵哈哈6 分钟前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
Nicholas6813 分钟前
flutter滚动视图之ScrollView源码解析(五)
前端
电商API大数据接口开发Cris15 分钟前
Go 语言并发采集淘宝商品数据:利用 API 实现高性能抓取
前端·数据挖掘·api
ITMan彪叔15 分钟前
Nodejs打包 Webpack 中 __dirname 的正确配置与行为解析
javascript·后端
风中凌乱的L20 分钟前
vue 一键打包上传
前端·javascript·vue.js
GHOME24 分钟前
Vue2与Vue3响应式原理对比
前端·vue.js·面试
张元清26 分钟前
useMergedRefs: 组件封装必不可少的自定义Hook
前端·javascript·面试
openInula前端开源社区26 分钟前
【openInula茶话会】第四期:openInula API2.0编译器原理
前端·javascript
moyu8428 分钟前
深入解析 JavaScript 作用域链:变量查找的核心机制
前端