xpz2018
4 years ago
7 changed files with 0 additions and 280 deletions
Unified View
Diff Options
-
165components/notice-bar/index.js
-
3components/notice-bar/index.json
-
22components/notice-bar/index.wxml
-
52components/notice-bar/index.wxss
-
2pages/article/hot-index/index.js
-
1pages/article/hot-index/index.json
-
35pages/article/hot-index/index.wxml
@ -1,165 +0,0 @@ |
|||||
import baseComponent from '../helpers/baseComponent' |
|
||||
import classNames from '../helpers/classNames' |
|
||||
|
|
||||
baseComponent({ |
|
||||
properties: { |
|
||||
prefixCls: { |
|
||||
type: String, |
|
||||
value: 'wux-notice-bar', |
|
||||
}, |
|
||||
icon: { |
|
||||
type: String, |
|
||||
value: null, |
|
||||
}, |
|
||||
content: { |
|
||||
type: String, |
|
||||
value: '', |
|
||||
}, |
|
||||
mode: { |
|
||||
type: String, |
|
||||
value: '', |
|
||||
}, |
|
||||
action: { |
|
||||
type: String, |
|
||||
value: null, |
|
||||
}, |
|
||||
loop: { |
|
||||
type: Boolean, |
|
||||
value: false, |
|
||||
}, |
|
||||
leading: { |
|
||||
type: Number, |
|
||||
value: 500, |
|
||||
}, |
|
||||
trailing: { |
|
||||
type: Number, |
|
||||
value: 1000, |
|
||||
}, |
|
||||
speed: { |
|
||||
type: Number, |
|
||||
value: 25, |
|
||||
}, |
|
||||
}, |
|
||||
data: { |
|
||||
animatedWidth: 0, |
|
||||
overflowWidth: 0, |
|
||||
visible: true, |
|
||||
}, |
|
||||
computed: { |
|
||||
classes: ['prefixCls', function(prefixCls) { |
|
||||
const wrap = classNames(prefixCls) |
|
||||
const hd = `${prefixCls}__hd` |
|
||||
const icon = `${prefixCls}__icon` |
|
||||
const bd = `${prefixCls}__bd` |
|
||||
const container = `${prefixCls}__marquee-container` |
|
||||
const marquee = `${prefixCls}__marquee` |
|
||||
const ft = `${prefixCls}__ft` |
|
||||
const action = `${prefixCls}__action` |
|
||||
|
|
||||
return { |
|
||||
wrap, |
|
||||
hd, |
|
||||
icon, |
|
||||
bd, |
|
||||
container, |
|
||||
marquee, |
|
||||
ft, |
|
||||
action, |
|
||||
} |
|
||||
}], |
|
||||
}, |
|
||||
observers: { |
|
||||
content() { |
|
||||
this.resetAnimation() |
|
||||
}, |
|
||||
}, |
|
||||
methods: { |
|
||||
clearMarqueeTimer() { |
|
||||
if (this.marqueeTimer) { |
|
||||
clearTimeout(this.marqueeTimer) |
|
||||
this.marqueeTimer = null |
|
||||
} |
|
||||
}, |
|
||||
startAnimation() { |
|
||||
this.clearMarqueeTimer() |
|
||||
const { loop, leading, trailing, speed } = this.data |
|
||||
const isLeading = this.data.animatedWidth === 0 |
|
||||
const timeout = isLeading ? leading : speed |
|
||||
const animate = () => { |
|
||||
let animatedWidth = this.data.animatedWidth + 1 |
|
||||
const isRoundOver = animatedWidth > this.data.overflowWidth |
|
||||
// 判断是否完成一次滚动
|
|
||||
if (isRoundOver) { |
|
||||
if (!loop) return |
|
||||
// 重置初始位置
|
|
||||
animatedWidth = 0 |
|
||||
} |
|
||||
// 判断是否等待一段时间后进行下一次滚动
|
|
||||
if (isRoundOver && trailing) { |
|
||||
this.triggerEvent('loop') |
|
||||
setTimeout(() => { |
|
||||
this.setData({ animatedWidth }) |
|
||||
this.marqueeTimer = setTimeout(animate, speed) |
|
||||
}, trailing) |
|
||||
} else { |
|
||||
this.setData({ animatedWidth }) |
|
||||
this.marqueeTimer = setTimeout(animate, speed) |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
if (this.data.overflowWidth !== 0) { |
|
||||
this.marqueeTimer = setTimeout(animate, timeout) |
|
||||
} |
|
||||
}, |
|
||||
initAnimation(isForce) { |
|
||||
const { prefixCls } = this.data |
|
||||
const query = wx.createSelectorQuery().in(this) |
|
||||
query.select(`.${prefixCls}__marquee-container`).boundingClientRect() |
|
||||
query.select(`.${prefixCls}__marquee`).boundingClientRect() |
|
||||
query.exec((rects) => { |
|
||||
if (rects.filter((n) => !n).length) return |
|
||||
|
|
||||
const [container, text] = rects |
|
||||
const overflowWidth = text.width - container.width |
|
||||
if (this.data.overflowWidth !== overflowWidth || isForce) { |
|
||||
this.setData({ overflowWidth, animatedWidth: 0 }, () => { |
|
||||
// 当文本内容存在且长度可滚动时，才触发动画
|
|
||||
if (text.width > 0 && overflowWidth > 0) { |
|
||||
this.startAnimation() |
|
||||
} else { |
|
||||
this.startLoop() |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
startLoop: function () { |
|
||||
this.clearMarqueeTimer() |
|
||||
this.marqueeTimer = setTimeout(() => { |
|
||||
this.triggerEvent('loop') |
|
||||
}, 3000) |
|
||||
}, |
|
||||
resetAnimation() { |
|
||||
this.initAnimation(true) |
|
||||
}, |
|
||||
stopAnimation() { |
|
||||
this.clearMarqueeTimer() |
|
||||
}, |
|
||||
onAction() { |
|
||||
if (this.data.mode === 'closable') { |
|
||||
this.clearMarqueeTimer() |
|
||||
this.setData({ visible: false }) |
|
||||
} |
|
||||
this.triggerEvent('click') |
|
||||
}, |
|
||||
onClick() { |
|
||||
this.triggerEvent('click') |
|
||||
}, |
|
||||
}, |
|
||||
ready() { |
|
||||
this.initAnimation() |
|
||||
}, |
|
||||
detached() { |
|
||||
this.clearMarqueeTimer() |
|
||||
}, |
|
||||
}) |
|
||||
@ -1,3 +0,0 @@ |
|||||
{ |
|
||||
"component": true |
|
||||
} |
|
||||
@ -1,22 +0,0 @@ |
|||||
<view class="wux-class {{ classes.wrap }}" wx:if="{{ visible }}" bindtap="onClick"> |
|
||||
<view class="{{ classes.hd }}"> |
|
||||
<image class="{{ classes.icon }}" src="{{ icon }}" wx:if="{{ icon }}" /> |
|
||||
<block wx:else> |
|
||||
<slot name="header"></slot> |
|
||||
</block> |
|
||||
</view> |
|
||||
<view class="{{ classes.bd }}"> |
|
||||
<view class="{{ classes.container }}"> |
|
||||
<view class="{{ classes.marquee }}" style="transform: translate3d({{ -animatedWidth + 'px' }}, 0px, 0px)"> |
|
||||
<block wx:if="{{ content }}">{{ content }}</block> |
|
||||
<slot></slot> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="{{ classes.ft }}" catchtap="onAction" wx:if="{{ mode === 'closable' || mode === 'link' }}"> |
|
||||
<image class="{{ classes.action }}" src="{{ action }}" wx:if="{{ action }}" /> |
|
||||
<block wx:else> |
|
||||
<slot name="footer"></slot> |
|
||||
</block> |
|
||||
</view> |
|
||||
</view> |
|
||||
@ -1,52 +0,0 @@ |
|||||
.wux-notice-bar { |
|
||||
background-color: #fefcec; |
|
||||
height: 72rpx; |
|
||||
overflow: hidden; |
|
||||
font-size: 28rpx; |
|
||||
line-height: 72rpx; |
|
||||
color: #f76a24; |
|
||||
display: -ms-flexbox; |
|
||||
display: flex; |
|
||||
padding: 0 20rpx |
|
||||
} |
|
||||
.wux-notice-bar__icon { |
|
||||
width: 30rpx; |
|
||||
height: 30rpx; |
|
||||
margin-right: 20rpx |
|
||||
} |
|
||||
.wux-notice-bar__action { |
|
||||
width: 30rpx; |
|
||||
height: 30rpx; |
|
||||
margin-left: 20rpx |
|
||||
} |
|
||||
.wux-notice-bar__hd { |
|
||||
display: -ms-flexbox; |
|
||||
display: flex; |
|
||||
margin-right: 8rpx; |
|
||||
-ms-flex-align: center; |
|
||||
align-items: center |
|
||||
} |
|
||||
.wux-notice-bar__bd { |
|
||||
-ms-flex: 1; |
|
||||
flex: 1; |
|
||||
width: 100%; |
|
||||
width: auto; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap |
|
||||
} |
|
||||
.wux-notice-bar__marquee-container { |
|
||||
overflow: hidden |
|
||||
} |
|
||||
.wux-notice-bar__marquee { |
|
||||
position: relative; |
|
||||
transform: translate3d(0,0,0); |
|
||||
white-space: nowrap; |
|
||||
display: inline-block |
|
||||
} |
|
||||
.wux-notice-bar__ft { |
|
||||
display: -ms-flexbox; |
|
||||
display: flex; |
|
||||
-ms-flex-align: center; |
|
||||
align-items: center |
|
||||
} |
|
||||
Write
Preview
Loading…
Cancel
Save