13 changed files with 979 additions and 1 deletions
@ -0,0 +1,30 @@ |
|||
## 1.2.5（2025-04-14） |
|||
- 修复 filterShow 导致的运行报错 |
|||
## 1.2.4（2024-09-21） |
|||
- 新增 支持控制显示位数 默认显示2位 |
|||
## 1.2.3（2024-02-20） |
|||
- 新增 支持控制小时，分钟的显隐：showHour showMinute |
|||
## 1.2.2（2022-01-19） |
|||
- 修复 在微信小程序中样式不生效的bug |
|||
## 1.2.1（2022-01-18） |
|||
- 新增 update 方法 ，在动态更新时间后，刷新组件 |
|||
## 1.2.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown) |
|||
## 1.1.3（2021-10-18） |
|||
- 重构 |
|||
- 新增 font-size 支持自定义字体大小 |
|||
## 1.1.2（2021-08-24） |
|||
- 新增 支持国际化 |
|||
## 1.1.1（2021-07-30） |
|||
- 优化 vue3下小程序事件警告的问题 |
|||
## 1.1.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.5（2021-06-18） |
|||
- 修复 uni-countdown 重复赋值跳两秒的 bug |
|||
## 1.0.4（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.3（2021-05-08） |
|||
- 修复 uni-countdown 不能控制倒计时的 bug |
|||
## 1.0.2（2021-02-04） |
|||
- 调整为uni_modules目录规范 |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"uni-countdown.day": "day", |
|||
"uni-countdown.h": "h", |
|||
"uni-countdown.m": "m", |
|||
"uni-countdown.s": "s" |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import en from './en.json' |
|||
import zhHans from './zh-Hans.json' |
|||
import zhHant from './zh-Hant.json' |
|||
export default { |
|||
en, |
|||
'zh-Hans': zhHans, |
|||
'zh-Hant': zhHant |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"uni-countdown.day": "天", |
|||
"uni-countdown.h": "时", |
|||
"uni-countdown.m": "分", |
|||
"uni-countdown.s": "秒" |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"uni-countdown.day": "天", |
|||
"uni-countdown.h": "時", |
|||
"uni-countdown.m": "分", |
|||
"uni-countdown.s": "秒" |
|||
} |
|||
@ -0,0 +1,278 @@ |
|||
<template> |
|||
<view class="uni-countdown"> |
|||
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text> |
|||
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text> |
|||
<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text> |
|||
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text> |
|||
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text> |
|||
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text> |
|||
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text> |
|||
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { |
|||
initVueI18n |
|||
} from '@dcloudio/uni-i18n' |
|||
import messages from './i18n/index.js' |
|||
const { |
|||
t |
|||
} = initVueI18n(messages) |
|||
/** |
|||
* Countdown 倒计时 |
|||
* @description 倒计时组件 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=25 |
|||
* @property {String} backgroundColor 背景色 |
|||
* @property {String} color 文字颜色 |
|||
* @property {Number} day 天数 |
|||
* @property {Number} hour 小时 |
|||
* @property {Number} minute 分钟 |
|||
* @property {Number} second 秒 |
|||
* @property {Number} timestamp 时间戳 |
|||
* @property {Boolean} showDay = [true|false] 是否显示天数 |
|||
* @property {Boolean} showHour = [true|false] 是否显示小时 |
|||
* @property {Boolean} showMinute = [true|false] 是否显示分钟 |
|||
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符 |
|||
* @property {String} splitorColor 分割符号颜色 |
|||
* @event {Function} timeup 倒计时时间到触发事件 |
|||
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown> |
|||
*/ |
|||
export default { |
|||
name: 'UniCountdown', |
|||
emits: ['timeup'], |
|||
props: { |
|||
showDay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
showHour: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
showMinute: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
showColon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
start: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333' |
|||
}, |
|||
fontSize: { |
|||
type: Number, |
|||
default: 14 |
|||
}, |
|||
splitorColor: { |
|||
type: String, |
|||
default: '#333' |
|||
}, |
|||
day: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
hour: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
minute: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
second: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
timestamp: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
filterShow : { |
|||
type:Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
syncFlag: false, |
|||
d: '00', |
|||
h: '00', |
|||
i: '00', |
|||
s: '00', |
|||
leftTime: 0, |
|||
seconds: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
dayText() { |
|||
return t("uni-countdown.day") |
|||
}, |
|||
hourText(val) { |
|||
return t("uni-countdown.h") |
|||
}, |
|||
minuteText(val) { |
|||
return t("uni-countdown.m") |
|||
}, |
|||
secondText(val) { |
|||
return t("uni-countdown.s") |
|||
}, |
|||
timeStyle() { |
|||
const { |
|||
color, |
|||
backgroundColor, |
|||
fontSize |
|||
} = this |
|||
return { |
|||
color, |
|||
backgroundColor, |
|||
fontSize: `${fontSize}px`, |
|||
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放 |
|||
lineHeight: `${fontSize * 20 / 14}px`, |
|||
borderRadius: `${fontSize * 3 / 14}px`, |
|||
} |
|||
}, |
|||
splitorStyle() { |
|||
const { splitorColor, fontSize, backgroundColor } = this |
|||
return { |
|||
color: splitorColor, |
|||
fontSize: `${fontSize * 12 / 14}px`, |
|||
margin: backgroundColor ? `${fontSize * 4 / 14}px` : '' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
day(val) { |
|||
this.changeFlag() |
|||
}, |
|||
hour(val) { |
|||
this.changeFlag() |
|||
}, |
|||
minute(val) { |
|||
this.changeFlag() |
|||
}, |
|||
second(val) { |
|||
this.changeFlag() |
|||
}, |
|||
start: { |
|||
immediate: true, |
|||
handler(newVal, oldVal) { |
|||
if (newVal) { |
|||
this.startData(); |
|||
} else { |
|||
if (!oldVal) return |
|||
clearInterval(this.timer) |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
created: function(e) { |
|||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
|||
this.countDown() |
|||
}, |
|||
// #ifndef VUE3 |
|||
destroyed() { |
|||
clearInterval(this.timer) |
|||
}, |
|||
// #endif |
|||
// #ifdef VUE3 |
|||
unmounted() { |
|||
clearInterval(this.timer) |
|||
}, |
|||
// #endif |
|||
methods: { |
|||
toSeconds(timestamp, day, hours, minutes, seconds) { |
|||
if (timestamp) { |
|||
return timestamp - parseInt(new Date().getTime() / 1000, 10) |
|||
} |
|||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds |
|||
}, |
|||
timeUp() { |
|||
clearInterval(this.timer) |
|||
this.$emit('timeup') |
|||
}, |
|||
countDown() { |
|||
let seconds = this.seconds |
|||
let [day, hour, minute, second] = [0, 0, 0, 0] |
|||
if (seconds > 0) { |
|||
day = Math.floor(seconds / (60 * 60 * 24)) |
|||
hour = Math.floor(seconds / (60 * 60)) - (day * 24) |
|||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60) |
|||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) |
|||
} else { |
|||
this.timeUp() |
|||
} |
|||
this.d = String(day).padStart(this.validFilterShow(this.filterShow.d), '0') |
|||
this.h = String(hour).padStart(this.validFilterShow(this.filterShow.h), '0') |
|||
this.i = String(minute).padStart(this.validFilterShow(this.filterShow.m), '0') |
|||
this.s = String(second).padStart(this.validFilterShow(this.filterShow.s), '0') |
|||
}, |
|||
validFilterShow(filter){ |
|||
return (filter && filter > 0) ? filter : 2; |
|||
}, |
|||
startData() { |
|||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
|||
if (this.seconds <= 0) { |
|||
this.seconds = this.toSeconds(0, 0, 0, 0, 0) |
|||
this.countDown() |
|||
return |
|||
} |
|||
clearInterval(this.timer) |
|||
this.countDown() |
|||
this.timer = setInterval(() => { |
|||
this.seconds-- |
|||
if (this.seconds < 0) { |
|||
this.timeUp() |
|||
return |
|||
} |
|||
this.countDown() |
|||
}, 1000) |
|||
}, |
|||
update(){ |
|||
this.startData(); |
|||
}, |
|||
changeFlag() { |
|||
if (!this.syncFlag) { |
|||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
|||
this.startData(); |
|||
this.syncFlag = true; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
$font-size: 14px; |
|||
|
|||
.uni-countdown { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
|
|||
&__splitor { |
|||
margin: 0 2px; |
|||
font-size: $font-size; |
|||
color: #333; |
|||
} |
|||
|
|||
&__number { |
|||
border-radius: 3px; |
|||
text-align: center; |
|||
font-size: $font-size; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
{ |
|||
"id": "uni-countdown", |
|||
"displayName": "uni-countdown 倒计时", |
|||
"version": "1.2.5", |
|||
"description": "CountDown 倒计时组件", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"countdown", |
|||
"倒计时" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y", |
|||
"alipay": "n" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y", |
|||
"app-harmony": "u", |
|||
"app-uvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
|
|||
|
|||
## CountDown 倒计时 |
|||
> **组件名：uni-countdown** |
|||
> 代码块： `uCountDown` |
|||
|
|||
倒计时组件。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,22 @@ |
|||
## 1.2.3（2025-04-14） |
|||
- 新增 左侧自定义插槽，可自定义文字或图标 |
|||
## 1.2.2（2023-12-20） |
|||
- 修复动态绑定title时，滚动速度不一致的问题 |
|||
## 1.2.1（2022-09-05） |
|||
- 新增 属性 fontSize，可修改文字大小。 |
|||
## 1.2.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar) |
|||
## 1.1.1（2021-11-09） |
|||
- 新增 提供组件设计资源，组件样式调整 |
|||
## 1.1.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.9（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.8（2021-04-21） |
|||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 |
|||
## 1.0.7（2021-02-05） |
|||
- 优化 组件引用关系，通过uni_modules引用组件 |
|||
|
|||
## 1.0.6（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
@ -0,0 +1,423 @@ |
|||
<template> |
|||
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor }" @click="onClick"> |
|||
<slot v-if="showIcon === true || showIcon === 'true'" name="noticebarIcon"> |
|||
<uni-icons class="uni-noticebar-icon" type="sound" :color="color" :size="fontSize * 1.5" /> |
|||
</slot> |
|||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{ |
|||
'uni-noticebar__content-wrapper--scrollable': scrollable, |
|||
'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText) |
|||
}" :style="{ height: scrollable ? fontSize * 1.5 + 'px' : 'auto' }"> |
|||
<view :id="elIdBox" class="uni-noticebar__content" :class="{ |
|||
'uni-noticebar__content--scrollable': scrollable, |
|||
'uni-noticebar__content--single': !scrollable && (single || moreText) |
|||
}"> |
|||
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{ |
|||
'uni-noticebar__content-text--scrollable': scrollable, |
|||
'uni-noticebar__content-text--single': !scrollable && (single || showGetMore) |
|||
}" :style="{ |
|||
color: color, |
|||
fontSize: fontSize + 'px', |
|||
lineHeight: fontSize * 1.5 + 'px', |
|||
width: wrapWidth + 'px', |
|||
'animationDuration': animationDuration, |
|||
'-webkit-animationDuration': animationDuration, |
|||
animationPlayState: webviewHide ? 'paused' : animationPlayState, |
|||
'-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState, |
|||
animationDelay: animationDelay, |
|||
'-webkit-animationDelay': animationDelay |
|||
}">{{text}}</text> |
|||
</view> |
|||
</view> |
|||
<view v-if="isShowGetMore" class="uni-noticebar__more uni-cursor-point" @click="clickMore"> |
|||
<text v-if="moreText.length > 0" :style="{ color: moreColor, fontSize: fontSize + 'px' }">{{ moreText }}</text> |
|||
<uni-icons v-else type="right" :color="moreColor" :size="fontSize * 1.1" /> |
|||
</view> |
|||
<view class="uni-noticebar-close uni-cursor-point" v-if="isShowClose"> |
|||
<uni-icons type="closeempty" :color="color" :size="fontSize * 1.1" @click="close" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifdef APP-NVUE |
|||
const dom = weex.requireModule('dom'); |
|||
const animation = weex.requireModule('animation'); |
|||
// #endif |
|||
|
|||
/** |
|||
* NoticeBar 自定义导航栏 |
|||
* @description 通告栏组件 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=30 |
|||
* @property {Number} speed 文字滚动的速度，默认100px/秒 |
|||
* @property {String} text 显示文字 |
|||
* @property {String} backgroundColor 背景颜色 |
|||
* @property {String} color 文字颜色 |
|||
* @property {String} moreColor 查看更多文字的颜色 |
|||
* @property {String} moreText 设置“查看更多”的文本 |
|||
* @property {Boolean} single = [true|false] 是否单行 |
|||
* @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行 |
|||
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标 |
|||
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮 |
|||
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行 |
|||
* @event {Function} click 点击 NoticeBar 触发事件 |
|||
* @event {Function} close 关闭 NoticeBar 触发事件 |
|||
* @event {Function} getmore 点击”查看更多“时触发事件 |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'UniNoticeBar', |
|||
emits: ['click', 'getmore', 'close'], |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
moreText: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: '#FFF9EA' |
|||
}, |
|||
speed: { |
|||
// 默认1s滚动100px |
|||
type: Number, |
|||
default: 100 |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#FF9A43' |
|||
}, |
|||
fontSize: { |
|||
type: Number, |
|||
default: 14 |
|||
}, |
|||
moreColor: { |
|||
type: String, |
|||
default: '#FF9A43' |
|||
}, |
|||
single: { |
|||
// 是否单行 |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
scrollable: { |
|||
// 是否滚动，添加后控制单行效果取消 |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
showIcon: { |
|||
// 是否显示左侧icon |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
showGetMore: { |
|||
// 是否显示右侧查看更多 |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
showClose: { |
|||
// 是否显示左侧关闭按钮 |
|||
type: [Boolean, String], |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
|||
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
|||
return { |
|||
textWidth: 0, |
|||
boxWidth: 0, |
|||
wrapWidth: '', |
|||
webviewHide: false, |
|||
// #ifdef APP-NVUE |
|||
stopAnimation: false, |
|||
// #endif |
|||
elId: elId, |
|||
elIdBox: elIdBox, |
|||
show: true, |
|||
animationDuration: 'none', |
|||
animationPlayState: 'paused', |
|||
animationDelay: '0s' |
|||
} |
|||
}, |
|||
watch: { |
|||
text(newValue, oldValue) { |
|||
this.initSize(); |
|||
} |
|||
}, |
|||
computed: { |
|||
isShowGetMore() { |
|||
return this.showGetMore === true || this.showGetMore === 'true' |
|||
}, |
|||
isShowClose() { |
|||
return (this.showClose === true || this.showClose === 'true') && |
|||
(this.showGetMore === false || this.showGetMore === 'false') |
|||
} |
|||
}, |
|||
mounted() { |
|||
// #ifdef APP-PLUS |
|||
var pages = getCurrentPages(); |
|||
var page = pages[pages.length - 1]; |
|||
var currentWebview = page.$getAppWebview(); |
|||
currentWebview.addEventListener('hide', () => { |
|||
this.webviewHide = true |
|||
}) |
|||
currentWebview.addEventListener('show', () => { |
|||
this.webviewHide = false |
|||
}) |
|||
// #endif |
|||
this.$nextTick(() => { |
|||
this.initSize() |
|||
}) |
|||
}, |
|||
// #ifdef APP-NVUE |
|||
beforeDestroy() { |
|||
this.stopAnimation = true |
|||
}, |
|||
// #endif |
|||
methods: { |
|||
initSize() { |
|||
if (this.scrollable) { |
|||
// #ifndef APP-NVUE |
|||
let query = [], |
|||
boxWidth = 0, |
|||
textWidth = 0; |
|||
let textQuery = new Promise((resolve, reject) => { |
|||
uni.createSelectorQuery() |
|||
// #ifndef MP-ALIPAY |
|||
.in(this) |
|||
// #endif |
|||
.select(`#${this.elId}`) |
|||
.boundingClientRect() |
|||
.exec(ret => { |
|||
this.textWidth = ret[0].width |
|||
resolve() |
|||
}) |
|||
}) |
|||
let boxQuery = new Promise((resolve, reject) => { |
|||
uni.createSelectorQuery() |
|||
// #ifndef MP-ALIPAY |
|||
.in(this) |
|||
// #endif |
|||
.select(`#${this.elIdBox}`) |
|||
.boundingClientRect() |
|||
.exec(ret => { |
|||
this.boxWidth = ret[0].width |
|||
resolve() |
|||
}) |
|||
}) |
|||
query.push(textQuery) |
|||
query.push(boxQuery) |
|||
Promise.all(query).then(() => { |
|||
this.animationDuration = `${this.textWidth / this.speed}s` |
|||
this.animationDelay = `-${this.boxWidth / this.speed}s` |
|||
setTimeout(() => { |
|||
this.animationPlayState = 'running' |
|||
}, 1000) |
|||
}) |
|||
// #endif |
|||
// #ifdef APP-NVUE |
|||
dom.getComponentRect(this.$refs['animationEle'], (res) => { |
|||
let winWidth = uni.getSystemInfoSync().windowWidth |
|||
this.textWidth = res.size.width |
|||
animation.transition(this.$refs['animationEle'], { |
|||
styles: { |
|||
transform: `translateX(-${winWidth}px)` |
|||
}, |
|||
duration: 0, |
|||
timingFunction: 'linear', |
|||
delay: 0 |
|||
}, () => { |
|||
if (!this.stopAnimation) { |
|||
animation.transition(this.$refs['animationEle'], { |
|||
styles: { |
|||
transform: `translateX(-${this.textWidth}px)` |
|||
}, |
|||
timingFunction: 'linear', |
|||
duration: (this.textWidth - winWidth) / this.speed * 1000, |
|||
delay: 1000 |
|||
}, () => { |
|||
if (!this.stopAnimation) { |
|||
this.loopAnimation() |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}) |
|||
// #endif |
|||
} |
|||
// #ifdef APP-NVUE |
|||
if (!this.scrollable && (this.single || this.moreText)) { |
|||
dom.getComponentRect(this.$refs['textBox'], (res) => { |
|||
this.wrapWidth = res.size.width |
|||
}) |
|||
} |
|||
// #endif |
|||
}, |
|||
loopAnimation() { |
|||
// #ifdef APP-NVUE |
|||
animation.transition(this.$refs['animationEle'], { |
|||
styles: { |
|||
transform: `translateX(0px)` |
|||
}, |
|||
duration: 0 |
|||
}, () => { |
|||
if (!this.stopAnimation) { |
|||
animation.transition(this.$refs['animationEle'], { |
|||
styles: { |
|||
transform: `translateX(-${this.textWidth}px)` |
|||
}, |
|||
duration: this.textWidth / this.speed * 1000, |
|||
timingFunction: 'linear', |
|||
delay: 0 |
|||
}, () => { |
|||
if (!this.stopAnimation) { |
|||
this.loopAnimation() |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
// #endif |
|||
}, |
|||
clickMore() { |
|||
this.$emit('getmore') |
|||
}, |
|||
close() { |
|||
this.show = false; |
|||
this.$emit('close') |
|||
}, |
|||
onClick() { |
|||
this.$emit('click') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-noticebar { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding: 10px 12px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.uni-cursor-point { |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar-close { |
|||
margin-left: 8px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.uni-noticebar-icon { |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.uni-noticebar__content-wrapper { |
|||
flex: 1; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-noticebar__content-wrapper--single { |
|||
/* #ifndef APP-NVUE */ |
|||
line-height: 18px; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar__content-wrapper--single, |
|||
.uni-noticebar__content-wrapper--scrollable { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
/* #ifndef APP-NVUE */ |
|||
.uni-noticebar__content-wrapper--scrollable { |
|||
position: relative; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
.uni-noticebar__content--scrollable { |
|||
/* #ifdef APP-NVUE */ |
|||
flex: 0; |
|||
/* #endif */ |
|||
/* #ifndef APP-NVUE */ |
|||
flex: 1; |
|||
display: block; |
|||
overflow: hidden; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar__content--single { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
flex: none; |
|||
width: 100%; |
|||
justify-content: center; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar__content-text { |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
/* #ifndef APP-NVUE */ |
|||
word-break: break-all; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar__content-text--single { |
|||
/* #ifdef APP-NVUE */ |
|||
lines: 1; |
|||
/* #endif */ |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
/* #endif */ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.uni-noticebar__content-text--scrollable { |
|||
/* #ifdef APP-NVUE */ |
|||
lines: 1; |
|||
padding-left: 750rpx; |
|||
/* #endif */ |
|||
/* #ifndef APP-NVUE */ |
|||
position: absolute; |
|||
display: block; |
|||
height: 18px; |
|||
line-height: 18px; |
|||
white-space: nowrap; |
|||
padding-left: 100%; |
|||
animation: notice 10s 0s linear infinite both; |
|||
animation-play-state: paused; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-noticebar__more { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
@keyframes notice { |
|||
100% { |
|||
transform: translate3d(-100%, 0, 0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
{ |
|||
"id": "uni-notice-bar", |
|||
"displayName": "uni-notice-bar 通告栏", |
|||
"version": "1.2.3", |
|||
"description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"通告栏", |
|||
"公告", |
|||
"跑马灯" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [ |
|||
"uni-scss", |
|||
"uni-icons" |
|||
], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y", |
|||
"alipay": "n" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y", |
|||
"app-harmony": "u", |
|||
"app-uvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
|
|||
|
|||
## NoticeBar 通告栏 |
|||
> **组件名：uni-notice-bar** |
|||
> 代码块： `uNoticeBar` |
|||
|
|||
|
|||
通告栏组件 。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
|
|||
|
|||
Loading…
Reference in new issue