目錄

#平臺差異說明

#基本使用

#配置主題

#配置圖標(biāo)

#配置滾動速度

#控制滾動的開始和暫停

#事件回調(diào)

#API

#Props

#Events

---

該組件用于滾動通告場景，有多種模式可供選擇

#平臺差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	頭條小程序	QQ小程序
√	√	√	√	√	√	√

#基本使用

• 通過list數(shù)組參數(shù)設(shè)置需要滾動的內(nèi)容
• 滾動mode參數(shù)有兩種模式，分別是horizontal水平滾動，vertical垂直滾動。其中水平滾動又可以通過is-circular來配置是銜接滾動(true)還是步進(jìn)滾動(false)， 銜接滾動滾動會把list數(shù)組元素拼接成一個字符串形式進(jìn)行滾動，步進(jìn)滾動模式類似輪播圖水平滾動的形式，具體效果請見實例

<template><view><u-notice-bar mode="horizontal" :list="list"></u-notice-bar><u-notice-bar mode="horizontal" :is-circular="false" :list="list"></u-notice-bar><u-notice-bar mode="vertical" :list="list"></u-notice-bar></view>
</template><script>export default {data() {return {list: ['寒雨連江夜入?yún)?#39;,'平明送客楚山孤','洛陽親友如相問','一片冰心在玉壺']}}}
</script>

#配置主題

• 通過type參數(shù)可以配置5種主題，即primary、warning(默認(rèn))、error、info、success、none

說明：none主題默認(rèn)沒有背景顏色

<u-notice-bar type="error" :list="list"></u-notice-bar>

#配置圖標(biāo)

• volume-icon參數(shù)配置是否顯示左側(cè)的音量小喇叭圖標(biāo)，默認(rèn)顯示
• more-icon配置是否顯示右側(cè)的向右箭頭，默認(rèn)關(guān)閉
• close-icon配置是否顯示關(guān)閉的圖標(biāo)，默認(rèn)關(guān)閉

<u-notice-bar :volume-icon="false" :list="list"></u-notice-bar><u-notice-bar :more-icon="true" :list="list"></u-notice-bar><u-notice-bar :close-icon="true" :list="list"></u-notice-bar>

#配置滾動速度

• mode為vertical(垂直滾動)，或者mode為horizontal且is-circular為false時，兩者都可視為"步進(jìn)"滾動，此時通過duration設(shè)置滾動周期時長
• mode為horizontal且is-circular為true時，可視為"水平銜接滾動"，此時uView加入了一個滾動因子參數(shù)，可確保在任意多內(nèi)容情況下，滾動速度恒定不變， 可通過speed參數(shù)配置每秒滾動的距離，單位為rpx

<u-notice-bar :mode="vertical" :duration="1500" :list="list"></u-notice-bar><u-notice-bar :mode="vertical" :is-circular="false" :duration="1500" :list="list"></u-notice-bar><u-notice-bar :mode="vertical" :is-circular="true" :speed="200"  :list="list"></u-notice-bar>

#控制滾動的開始和暫停

• autoplay參數(shù)默認(rèn)為true，控制是否自動播放滾動通告
• play-state參數(shù)為paused，滾動會暫停，為play滾動繼續(xù)播放

<u-notice-bar :autoplay="true" play-state="paused" :list="list"></u-notice-bar>

#事件回調(diào)

• more-icon參數(shù)為true時，點擊向右圖標(biāo)會回調(diào)一個getMore事件
• close-icon參數(shù)為true時，點擊關(guān)閉箭頭圖標(biāo)會觸發(fā)一個close事件
• 點擊通告欄的文字時，會觸發(fā)click事件，回調(diào)參數(shù)為當(dāng)前文字所在list數(shù)組參數(shù)的索引值

#API

#Props

參數(shù)	說明	類型	默認(rèn)值	可選值
list	滾動內(nèi)容，數(shù)組形式，見上方說明	Array	-	-
type	顯示的主題	String	warning	primary / info / error / success / none
volume-icon	是否顯示小喇叭圖標(biāo)	Boolean	true	false
more-icon	是否顯示右邊的向右箭頭	Boolean	false	true
close-icon	是否顯示關(guān)閉圖標(biāo)	Boolean	false	true
autoplay	是否自動播放	Boolean	true	false
color	文字顏色	String	-	-
bg-color	背景顏色	String | Number	-	-
mode	滾動模式	String	horizontal(水平滾動)	vertical(垂直滾動)
show	是否顯示	Boolean	true	false
volume-size	左邊喇叭的大小	String | Number	34	-
font-size	字體大小，單位rpx	String | Number	28	-
duration	滾動周期時長，只對步進(jìn)模式有效，橫向銜接模式無效，單位ms	String | Number	2000	-
speed	水平滾動時的滾動速度，即每秒移動多少距離，只對水平銜接方式有效，單位rpx	String | Number	160	-
is-circular	mode為horizontal時，指明是否水平銜接滾動	Boolean	true	false
play-state	播放狀態(tài)，play - 播放，paused - 暫停	String	play	paused
disable-touch	是否禁止通過手動滑動切換通知，只有mode = vertical，或者mode = horizontal且is-circular = false時有效；只支持App 2.5.5+、H5 2.5.5+、支付寶小程序、字節(jié)跳動小程序	Boolean	true	false
padding	內(nèi)置滾動通知的內(nèi)邊距，字符串，類似"16rpx 20rpx"	String	18rpx 24rpx	-
border-radius	圓角值，單位rpx	String \ Number	0	-
no-list-hidden	list為空數(shù)組時，是否顯示組件	Boolean	true	false

#Events

詳細(xì)解釋見上方說明

事件名	說明	回調(diào)參數(shù)	版本
click	點擊通告文字觸發(fā)，只有mode = vertical，或者mode = horizontal且is-circular = false時有效	index：當(dāng)前文字所在list數(shù)組的索引值	-
close	點擊右側(cè)關(guān)閉圖標(biāo)觸發(fā)	-	-
getMore	點擊右側(cè)向右圖標(biāo)觸發(fā)	-	-
end	列表的消息每次被播放一個周期時觸發(fā)，只有mode = vertical，或者mode = horizontal且is-circular = false時有效	-	-