目錄

#平臺差異說明

#基本使用

#配置主題

#配置圖標(biāo)

#配置滾動速度

#控制滾動的開始和暫停

#事件回調(diào)

#API

#Props

#Events

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

#平臺差異說明

#基本使用

• 通過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)?,
					'平明送客楚山孤',
					'洛陽親友如相問',
					'一片冰心在玉壺'
				]
			}
		}
	}
</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

#Events

詳細(xì)解釋見上方說明文章來源地址http://www.zghlxwxcb.cn/news/detail-801581.html

到了這里，關(guān)于uniapp中uview組件庫的NoticeBar 滾動通知 使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！