You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

160 lines
3.8 KiB

<template>
<view
class="u-notice"
@tap="clickHandler"
>
<slot name="icon">
<view
class="u-notice__left-icon"
v-if="icon"
>
<u-icon
:name="icon"
:color="color"
size="19"
></u-icon>
</view>
</slot>
<swiper
:disable-touch="disableTouch"
:vertical="step ? false : true"
circular
:interval="duration"
:autoplay="true"
class="u-notice__swiper"
@change="noticeChange"
>
<swiper-item
v-for="(item, index) in text"
:key="index"
class="u-notice__swiper__item"
>
<text
class="u-notice__swiper__item__text u-line-1"
:style="[textStyle]"
>{{ item }}</text>
</swiper-item>
</swiper>
<view
class="u-notice__right-icon"
v-if="['link', 'closable'].includes(mode)"
>
<u-icon
v-if="mode === 'link'"
name="arrow-right"
:size="17"
:color="color"
></u-icon>
<u-icon
v-if="mode === 'closable'"
name="close"
:size="16"
:color="color"
@click="close"
></u-icon>
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* ColumnNotice 滚动通知中的垂直滚动 内部组件
* @description 该组件用于滚动通告场景,是其中的垂直滚动方式
* @tutorial https://www.uviewui.com/components/noticeBar.html
* @property {Array} text 显示的内容,字符串
* @property {String} icon 是否显示左侧的音量图标 ( 默认 'volume' )
* @property {String} mode 通告模式,link-显示右箭头,closable-显示右侧关闭图标
* @property {String} color 文字颜色,各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
* @property {String} bgColor 背景颜色 ( 默认 '#fdf6ec' )
* @property {String | Number} fontSize 字体大小,单位px ( 默认 14 )
* @property {String | Number} speed 水平滚动时的滚动速度,即每秒滚动多少px(rpx),这有利于控制文字无论多少时,都能有一个恒定的速度 ( 默认 80 )
* @property {Boolean} step direction = row时,是否使用步进形式滚动 ( 默认 false )
* @property {String | Number} duration 滚动一个周期的时间长,单位ms ( 默认 1500 )
* @property {Boolean} disableTouch 是否禁止用手滑动切换 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 ( 默认 true )
* @example
*/
export default {
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
watch: {
text: {
immediate: true,
handler(newValue, oldValue) {
if(!uni.$u.test.array(newValue)) {
uni.$u.error('noticebar组件direction为column时,要求text参数为数组形式')
}
}
}
},
computed: {
// 文字内容的样式
textStyle() {
let style = {}
style.color = this.color
style.fontSize = uni.$u.addUnit(this.fontSize)
return style
},
// 垂直或者水平滚动
vertical() {
if (this.mode == 'horizontal') return false
else return true
},
},
data() {
return {
index:0
}
},
methods: {
noticeChange(e){
this.index = e.detail.current
},
// 点击通告栏
clickHandler() {
this.$emit('click', this.index)
},
// 点击关闭按钮
close() {
this.$emit('close')
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-notice {
@include flex;
align-items: center;
justify-content: space-between;
&__left-icon {
align-items: center;
margin-right: 5px;
}
&__right-icon {
margin-left: 5px;
align-items: center;
}
&__swiper {
height: 16px;
@include flex;
align-items: center;
flex: 1;
&__item {
@include flex;
align-items: center;
overflow: hidden;
&__text {
font-size: 14px;
color: $u-warning;
}
}
}
}
</style>