123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
|
<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.fontWeight = 'bold'
|
|||
|
|
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: 50rpx;
|
|||
|
|
@include flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
&__item {
|
|||
|
|
@include flex;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&__text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: $u-warning;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|