blob: 41a6cc474abecc47b83c1e053cde08edb22d0151 [file] [log] [blame]
guangchao.xu070005a2020-12-07 09:56:40 +08001<template>
2 <view class="u-notice-bar-wrap" v-if="isShow" :style="{
3 borderRadius: borderRadius + 'rpx',
4 }">
5 <block v-if="mode == 'horizontal' && isCircular">
6 <u-row-notice
7 :type="type"
8 :color="color"
9 :bgColor="bgColor"
10 :list="list"
11 :volumeIcon="volumeIcon"
12 :moreIcon="moreIcon"
13 :volumeSize="volumeSize"
14 :closeIcon="closeIcon"
15 :mode="mode"
16 :fontSize="fontSize"
17 :speed="speed"
18 :playState="playState"
19 :padding="padding"
20 @getMore="getMore"
21 @close="close"
22 @click="click"
23 ></u-row-notice>
24 </block>
25 <block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
26 <u-column-notice
27 :type="type"
28 :color="color"
29 :bgColor="bgColor"
30 :list="list"
31 :volumeIcon="volumeIcon"
32 :moreIcon="moreIcon"
33 :closeIcon="closeIcon"
34 :mode="mode"
35 :volumeSize="volumeSize"
36 :disable-touch="disableTouch"
37 :fontSize="fontSize"
38 :duration="duration"
39 :playState="playState"
40 :padding="padding"
41 @getMore="getMore"
42 @close="close"
43 @click="click"
44 @end="end"
45 ></u-column-notice>
46 </block>
47 </view>
48</template>
49<script>
50/**
51 * noticeBar 滚动通知
52 * @description 该组件用于滚动通告场景,有多种模式可供选择
53 * @tutorial https://www.uviewui.com/components/noticeBar.html
54 * @property {Array} list 滚动内容,数组形式,见上方说明
55 * @property {String} type 显示的主题(默认warning)
56 * @property {Boolean} volume-icon 是否显示小喇叭图标(默认true)
57 * @property {Boolean} more-icon 是否显示右边的向右箭头(默认false)
58 * @property {Boolean} close-icon 是否显示关闭图标(默认false)
59 * @property {Boolean} autoplay 是否自动播放(默认true)
60 * @property {String} color 文字颜色
61 * @property {String Number} bg-color 背景颜色
62 * @property {String} mode 滚动模式(默认horizontal)
63 * @property {Boolean} show 是否显示(默认true)
64 * @property {String Number} font-size 字体大小,单位rpx(默认28)
65 * @property {String Number} volume-size 左边喇叭的大小(默认34)
66 * @property {String Number} duration 滚动周期时长,只对步进模式有效,横向衔接模式无效,单位ms(默认2000)
67 * @property {String Number} speed 水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpx(默认160)
68 * @property {String Number} font-size 字体大小,单位rpx(默认28)
69 * @property {Boolean} is-circular mode为horizontal时,指明是否水平衔接滚动(默认true)
70 * @property {String} play-state 播放状态,play - 播放,paused - 暂停(默认play)
71 * @property {String Nubmer} border-radius 通知栏圆角(默认为0)
72 * @property {String Nubmer} padding 内边距,字符串,与普通的内边距css写法一直(默认"18rpx 24rpx")
73 * @property {Boolean} no-list-hidden 列表为空时,是否显示组件(默认false)
74 * @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知,只有mode = vertical,或者mode = horizontal且is-circular = false时有效(默认true)
75 * @event {Function} click 点击通告文字触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
76 * @event {Function} close 点击右侧关闭图标触发
77 * @event {Function} getMore 点击右侧向右图标触发
78 * @event {Function} end 列表的消息每次被播放一个周期时触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
79 * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
80 */
81export default {
82 name: "u-notice-bar",
83 props: {
84 // 显示的内容,数组
85 list: {
86 type: Array,
87 default() {
88 return [];
89 }
90 },
91 // 显示的主题,success|error|primary|info|warning
92 type: {
93 type: String,
94 default: 'warning'
95 },
96 // 是否显示左侧的音量图标
97 volumeIcon: {
98 type: Boolean,
99 default: true
100 },
101 // 音量喇叭的大小
102 volumeSize: {
103 type: [Number, String],
104 default: 34
105 },
106 // 是否显示右侧的右箭头图标
107 moreIcon: {
108 type: Boolean,
109 default: false
110 },
111 // 是否显示右侧的关闭图标
112 closeIcon: {
113 type: Boolean,
114 default: false
115 },
116 // 是否自动播放
117 autoplay: {
118 type: Boolean,
119 default: true
120 },
121 // 文字颜色,各图标也会使用文字颜色
122 color: {
123 type: String,
124 default: ''
125 },
126 // 背景颜色
127 bgColor: {
128 type: String,
129 default: ''
130 },
131 // 滚动方向,horizontal-水平滚动,vertical-垂直滚动
132 mode: {
133 type: String,
134 default: 'horizontal'
135 },
136 // 是否显示
137 show: {
138 type: Boolean,
139 default: true
140 },
141 // 字体大小,单位rpx
142 fontSize: {
143 type: [Number, String],
144 default: 28
145 },
146 // 滚动一个周期的时间长,单位ms
147 duration: {
148 type: [Number, String],
149 default: 2000
150 },
151 // 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
152 speed: {
153 type: [Number, String],
154 default: 160
155 },
156 // 水平滚动时,是否采用衔接形式滚动
157 // 水平衔接模式,采用的是swiper组件,水平滚动
158 isCircular: {
159 type: Boolean,
160 default: true
161 },
162 // 播放状态,play-播放,paused-暂停
163 playState: {
164 type: String,
165 default: 'play'
166 },
167 // 是否禁止用手滑动切换
168 // 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
169 disableTouch: {
170 type: Boolean,
171 default: true
172 },
173 // 滚动通知设置圆角
174 borderRadius: {
175 type: [Number, String],
176 default: 0
177 },
178 // 通知的边距
179 padding: {
180 type: [Number, String],
181 default: '18rpx 24rpx'
182 },
183 // list列表为空时,是否显示组件
184 noListHidden: {
185 type: Boolean,
186 default: true
187 }
188 },
189 computed: {
190 // 如果设置show为false,或者设置了noListHidden为true,且list长度又为零的话,隐藏组件
191 isShow() {
192 if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
193 else return true;
194 }
195 },
196 methods: {
197 // 点击通告栏
198 click(index) {
199 this.$emit('click', index);
200 },
201 // 点击关闭按钮
202 close() {
203 this.$emit('close');
204 },
205 // 点击更多箭头按钮
206 getMore() {
207 this.$emit('getMore');
208 },
209 // 滚动一个周期结束,只对垂直,或者水平步进形式有效
210 end() {
211 this.$emit('end');
212 }
213 }
214};
215</script>
216
217<style lang="scss" scoped>
218@import "../../libs/css/style.components.scss";
219
220.u-notice-bar-wrap {
221 overflow: hidden;
222}
223
224.u-notice-bar {
225 padding: 18rpx 24rpx;
226 overflow: hidden;
227}
228
229.u-direction-row {
230 @include vue-flex;
231 align-items: center;
232 justify-content: space-between;
233}
234
235.u-left-icon {
236 @include vue-flex;
237 align-items: center;
238}
239
240.u-notice-box {
241 flex: 1;
242 @include vue-flex;
243 overflow: hidden;
244 margin-left: 12rpx;
245}
246
247.u-right-icon {
248 margin-left: 12rpx;
249 @include vue-flex;
250 align-items: center;
251}
252
253.u-notice-content {
254 line-height: 1;
255 white-space: nowrap;
256 font-size: 26rpx;
257 animation: u-loop-animation 10s linear infinite both;
258 text-align: right;
259 // 这一句很重要,为了能让滚动左右连接起来
260 padding-left: 100%;
261}
262
263@keyframes u-loop-animation {
264 0% {
265 transform: translate3d(0, 0, 0);
266 }
267
268 100% {
269 transform: translate3d(-100%, 0, 0);
270 }
271}
272</style>