当前位置:网站首页>uniapp组件-uni-notice-bar通告栏
uniapp组件-uni-notice-bar通告栏
2022-07-03 01:02:00 【宋军涛】
通告栏组件多用于系统通知,广告通知等场景,可自定义图标,颜色,展现方式等。
基本用法
使用 text
属性设置通告栏内容
使用 singlet
属性设置导是否单行显示
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
#文字滚动
使用 scrollable
属性设置通文字是否滚动
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
#显示图标
使用 showIcon
属性设置是否显示图标
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
#显示关闭按钮
使用 showClose
属性设置是否显示关闭图标
<uni-notice-bar showClose showIcon text="这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
#查看更多
使用 showGetMore
属性设置是否显示右侧查看更多图标
使用 moreText
属性设置查看更多文本
<uni-notice-bar @getmore="getMore" showGetMore moreText="查看更多" single text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
注意
如果需要异步获取内容后展示需要使用v-if
进行控制,<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>
#NoticeBar API
#NoticeBar Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
speed | Number | 100 | 文字滚动的速度,默认100px/秒 |
text | String | - | 显示文字 |
background-color | String | #fffbe8 | 背景颜色 |
color | String | #de8c17 | 文字颜色 |
moreColor | String | #999999 | 查看更多文字的颜色 |
moreText | String | - | 设置“查看更多”的文本 |
single | Boolean | false | 是否单行 |
scrollable | Boolean | false | 是否滚动,为true时,NoticeBar为单行 |
showIcon | Boolean | false | 是否显示左侧喇叭图标 |
showClose | Boolean | false | 是否显示左侧关闭按钮 |
showGetMore | Boolean | false | 是否显示右侧查看更多图标,为true时,NoticeBar为单行 |
#NoticeBar Events
事件名称 | 说明 | 返回值 |
---|---|---|
@click | 点击 NoticeBar 触发事件 | - |
@close | 关闭 NoticeBar 触发事件 | - |
@getmore | 点击”查看更多“时触发事件 | - |
#示例
注意
示例依赖了 uni-card
uni-section
uni-scss
等多个组件,直接拷贝示例代码将无法正常运行 。
请到 组件下载页面 (opens new window),在页面右侧选择 使用 HBuilderX导入示例项目
,体验完整组件示例。
Template
Script
Style
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">通告栏组件多用于系统通知,广告通知等场景,可自定义图标,颜色,展现方式等。</text>
</uni-card>
<uni-section title="多行显示" type="line">
<uni-notice-bar text="uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="单行显示" subTitle="使用 single 属性单行显示通知" type="line">
<uni-notice-bar single text="uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="显示图标" subTitle="使用 show-icon 属性显示左侧小喇叭图标" type="line">
<uni-notice-bar show-icon text="uni-app发布,开发一次、7端覆盖!" />
</uni-section>
<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
<uni-notice-bar show-icon scrollable
text="uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="查看更多" subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
type="line">
<uni-notice-bar show-get-more show-icon text="年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!" @getmore="getMore" />
<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!"
@getmore="getMore" />
</uni-section>
<uni-section title="修改颜色" type="line">
<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
text="uni-app 1.6版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</uni-section>
<uni-section title="关闭按钮" subTitle="使用 show-close 属性,可关闭通知" type="line">
<uni-notice-bar show-close single text="HBuilderX 1.0正式发布!uni-app实现里程碑突破实现里程碑突破!" />
</uni-section>
</view>
</template>
边栏推荐
- The R language uses the ctree function in the party package to build conditional inference decision trees, uses the plot function to visualize the trained conditional inference decision tree, and the
- The industrial scope of industrial Internet is large enough. The era of consumer Internet is only a limited existence in the Internet industry
- ROS2之ESP32简单速度消息测试(极限频率)
- 18_ The wechat video number of wechat applet scrolls and automatically plays the video effect to achieve 2.0
- 按键精灵打怪学习-自动回城路线的判断
- Create your first Kivy program Hello word (tutorial includes source code)
- Esp32 simple speed message test of ros2 (limit frequency)
- MySQL基础用法02
- Arduino dy-sv17f automatic voice broadcast
- tail -f 、tail -F、tailf的区别
猜你喜欢
Data analysis, thinking, law breaking and professional knowledge -- analysis method (I)
软考信息系统项目管理师_历年真题_2019下半年错题集_上午综合知识题---软考高级之信息系统项目管理师053
matlab 多普勒效应产生振动信号和处理
用Go+绘制爱心给心爱的她表白
Esp32 simple speed message test of ros2 (limit frequency)
基本远程连接工具Xshell
[androd] module dependency replacement of gradle's usage skills
MySQL
【我的OpenGL学习进阶之旅】关于欧拉角、旋转顺序、旋转矩阵、四元数等知识的整理
FPGA - 7 Series FPGA internal structure clocking -04- multi area clock
随机推荐
看疫情之下服装企业如何顺势而为
MySQL
合并K个已排序的链表
Key wizard play strange learning - front desk and Intranet send background verification code
MySQL基础用法02
链表中的节点每k个一组翻转
按键精灵打怪学习-自动回城路线的判断
Appuyez sur l'apprentissage de l'esprit de frappe - reconnaissance des coordonnées de fond multithreadées
测试右移:线上质量监控 ELK 实战
Detailed explanation of Q-learning examples of reinforcement learning
Now that the teenager has returned, the world's fireworks are the most soothing and ordinary people return to work~
matlab 多普勒效应产生振动信号和处理
JS inheritance and prototype chain
[androd] module dependency replacement of gradle's usage skills
The latest analysis of tool fitter (technician) in 2022 and the test questions and analysis of tool fitter (technician)
电话网络问题
2022 coal mine gas drainage examination question bank and coal mine gas drainage examination questions and analysis
拥抱平台化交付的安全理念
R language ggplot2 visual faceting, visual facet_wrap bar plot, using strip Text function customize the size of the strip of each facet title in the facet graph (cutimi
信息熵的基础