当前位置:网站首页>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>
边栏推荐
- Compare version number
- Basic concept and implementation of overcoming hash
- Detailed explanation of Q-learning examples of reinforcement learning
- dotConnect for PostgreSQL数据提供程序
- Merge K sorted linked lists
- MySQL --- 数据库查询 - 基本查询
- ThinkPHP+Redis实现简单抽奖
- Excel if formula determines whether the two columns are the same
- Daily topic: movement of haystack
- leetcode 2097 — 合法重新排列数对
猜你喜欢
Basic concept and implementation of overcoming hash
MySQL
Niu Ke swipes questions and clocks in
Explain the basic concepts and five attributes of RDD in detail
How wide does the dual inline for bread board need?
异步、邮件、定时三大任务
Find a benchmark comrade in arms | a million level real-time data platform, which can be used for free for life
[FPGA tutorial case 6] design and implementation of dual port RAM based on vivado core
FPGA - 7 Series FPGA internal structure clocking -04- multi area clock
每日一题之干草堆的移动
随机推荐
Draw love with go+ to express love to her beloved
Excel calculates the difference between time and date and converts it into minutes
d. LDC build shared library
R language uses coin package to apply permutation tests to independence problems (permutation tests, whether response variables are independent of groups, are two numerical variables independent, and
[C language] branch and loop statements (Part 1)
【FH-GFSK】FH-GFSK信号分析与盲解调研究
MySQL foundation 05 DML language
FPGA - 7 Series FPGA internal structure clocking -04- multi area clock
Niu Ke swipes questions and clocks in
R language generalized linear model function GLM, (model fit and expression diagnostics), model adequacy evaluation method, use plot function and car package function
按键精灵打怪学习-前台和内网发送后台验证码
Now that the teenager has returned, the world's fireworks are the most soothing and ordinary people return to work~
每日一题之干草堆的移动
Embrace the safety concept of platform delivery
Data analysis, thinking, law breaking and professional knowledge -- analysis method (I)
matlab 多普勒效应产生振动信号和处理
链表中的节点每k个一组翻转
给你一个可能存在 重复 元素值的数组 numbers ,它原来是一个升序排列的数组,并按上述情形进行了一次旋转。请返回旋转数组的最小元素。【剑指Offer】
Explain the basic concepts and five attributes of RDD in detail
MySQL --- 数据库查询 - 条件查询