gaoxs
5 years ago
19 changed files with 707 additions and 61 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,132 @@
|
||||
export default { |
||||
"pulldown": "\ue588", |
||||
"refreshempty": "\ue461", |
||||
"back": "\ue471", |
||||
"forward": "\ue470", |
||||
"more": "\ue507", |
||||
"more-filled": "\ue537", |
||||
"scan": "\ue612", |
||||
"qq": "\ue264", |
||||
"weibo": "\ue260", |
||||
"weixin": "\ue261", |
||||
"pengyouquan": "\ue262", |
||||
"loop": "\ue565", |
||||
"refresh": "\ue407", |
||||
"refresh-filled": "\ue437", |
||||
"arrowthindown": "\ue585", |
||||
"arrowthinleft": "\ue586", |
||||
"arrowthinright": "\ue587", |
||||
"arrowthinup": "\ue584", |
||||
"undo-filled": "\ue7d6", |
||||
"undo": "\ue406", |
||||
"redo": "\ue405", |
||||
"redo-filled": "\ue7d9", |
||||
"bars": "\ue563", |
||||
"chatboxes": "\ue203", |
||||
"camera": "\ue301", |
||||
"chatboxes-filled": "\ue233", |
||||
"camera-filled": "\ue7ef", |
||||
"cart-filled": "\ue7f4", |
||||
"cart": "\ue7f5", |
||||
"checkbox-filled": "\ue442", |
||||
"checkbox": "\ue7fa", |
||||
"arrowleft": "\ue582", |
||||
"arrowdown": "\ue581", |
||||
"arrowright": "\ue583", |
||||
"smallcircle-filled": "\ue801", |
||||
"arrowup": "\ue580", |
||||
"circle": "\ue411", |
||||
"eye-filled": "\ue568", |
||||
"eye-slash-filled": "\ue822", |
||||
"eye-slash": "\ue823", |
||||
"eye": "\ue824", |
||||
"flag-filled": "\ue825", |
||||
"flag": "\ue508", |
||||
"gear-filled": "\ue532", |
||||
"reload": "\ue462", |
||||
"gear": "\ue502", |
||||
"hand-thumbsdown-filled": "\ue83b", |
||||
"hand-thumbsdown": "\ue83c", |
||||
"hand-thumbsup-filled": "\ue83d", |
||||
"heart-filled": "\ue83e", |
||||
"hand-thumbsup": "\ue83f", |
||||
"heart": "\ue840", |
||||
"home": "\ue500", |
||||
"info": "\ue504", |
||||
"home-filled": "\ue530", |
||||
"info-filled": "\ue534", |
||||
"circle-filled": "\ue441", |
||||
"chat-filled": "\ue847", |
||||
"chat": "\ue263", |
||||
"mail-open-filled": "\ue84d", |
||||
"email-filled": "\ue231", |
||||
"mail-open": "\ue84e", |
||||
"email": "\ue201", |
||||
"checkmarkempty": "\ue472", |
||||
"list": "\ue562", |
||||
"locked-filled": "\ue856", |
||||
"locked": "\ue506", |
||||
"map-filled": "\ue85c", |
||||
"map-pin": "\ue85e", |
||||
"map-pin-ellipse": "\ue864", |
||||
"map": "\ue364", |
||||
"minus-filled": "\ue440", |
||||
"mic-filled": "\ue332", |
||||
"minus": "\ue410", |
||||
"micoff": "\ue360", |
||||
"mic": "\ue302", |
||||
"clear": "\ue434", |
||||
"smallcircle": "\ue868", |
||||
"close": "\ue404", |
||||
"closeempty": "\ue460", |
||||
"paperclip": "\ue567", |
||||
"paperplane": "\ue503", |
||||
"paperplane-filled": "\ue86e", |
||||
"person-filled": "\ue131", |
||||
"contact-filled": "\ue130", |
||||
"person": "\ue101", |
||||
"contact": "\ue100", |
||||
"images-filled": "\ue87a", |
||||
"phone": "\ue200", |
||||
"images": "\ue87b", |
||||
"image": "\ue363", |
||||
"image-filled": "\ue877", |
||||
"location-filled": "\ue333", |
||||
"location": "\ue303", |
||||
"plus-filled": "\ue439", |
||||
"plus": "\ue409", |
||||
"plusempty": "\ue468", |
||||
"help-filled": "\ue535", |
||||
"help": "\ue505", |
||||
"navigate-filled": "\ue884", |
||||
"navigate": "\ue501", |
||||
"mic-slash-filled": "\ue892", |
||||
"search": "\ue466", |
||||
"settings": "\ue560", |
||||
"sound": "\ue590", |
||||
"sound-filled": "\ue8a1", |
||||
"spinner-cycle": "\ue465", |
||||
"download-filled": "\ue8a4", |
||||
"personadd-filled": "\ue132", |
||||
"videocam-filled": "\ue8af", |
||||
"personadd": "\ue102", |
||||
"upload": "\ue402", |
||||
"upload-filled": "\ue8b1", |
||||
"starhalf": "\ue463", |
||||
"star-filled": "\ue438", |
||||
"star": "\ue408", |
||||
"trash": "\ue401", |
||||
"phone-filled": "\ue230", |
||||
"compose": "\ue400", |
||||
"videocam": "\ue300", |
||||
"trash-filled": "\ue8dc", |
||||
"download": "\ue403", |
||||
"chatbubble-filled": "\ue232", |
||||
"chatbubble": "\ue202", |
||||
"cloud-download": "\ue8e4", |
||||
"cloud-upload-filled": "\ue8e5", |
||||
"cloud-upload": "\ue8e6", |
||||
"cloud-download-filled": "\ue8e9", |
||||
"headphones":"\ue8bf", |
||||
"shop":"\ue609" |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,395 @@
|
||||
<template> |
||||
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick"> |
||||
<!-- #ifdef MP-ALIPAY --> |
||||
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" @click="close"> |
||||
<uni-icons type="closeempty" :color="color" size="12" /> |
||||
</view> |
||||
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon"> |
||||
<uni-icons type="sound" :color="color" size="14" /> |
||||
</view> |
||||
<!-- #endif --> |
||||
<!-- #ifndef MP-ALIPAY --> |
||||
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" type="closeempty" :color="color" |
||||
size="12" @click="close" /> |
||||
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color" |
||||
size="14" /> |
||||
<!-- #endif --> |
||||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}"> |
||||
<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 || moreText)}" |
||||
:style="{color:color, 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="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore"> |
||||
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text> |
||||
<uni-icons type="arrowright" :color="moreColor" size="14" /> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import uniIcons from '../uni-icons/uni-icons.vue' |
||||
// #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', |
||||
components: { |
||||
uniIcons |
||||
}, |
||||
props: { |
||||
text: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
moreText: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
backgroundColor: { |
||||
type: String, |
||||
default: '#fffbe8' |
||||
}, |
||||
speed: { |
||||
// 默认1s滚动100px |
||||
type: Number, |
||||
default: 100 |
||||
}, |
||||
color: { |
||||
type: String, |
||||
default: '#de8c17' |
||||
}, |
||||
moreColor: { |
||||
type: String, |
||||
default: '#999999' |
||||
}, |
||||
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' |
||||
} |
||||
}, |
||||
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: 6px 12px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.uni-noticebar-close { |
||||
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; |
||||
height: 18px; |
||||
} |
||||
/* #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; |
||||
} |
||||
|
||||
.uni-noticebar__more-text { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
@keyframes notice { |
||||
100% { |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 16 KiB |
Loading…
Reference in new issue