微信小程序组件 滚动提示栏
效果如下
wxml
<view wx:if="{{ show }}" class="i-class i-noticebar" style="color: {{ color }}; background-color: {{ backgroundcolor }}">
<i-icon wx:if="{{ icon }}" type="{{ icon }}" size="24" color="{{color}}" class="i-noticebar-icon"></i-icon>
<view class="i-noticebar-content-wrap">
<view class="i-noticebar-content {{loop?'i-noticebar-content-loop':''}}" animation="{{ animationData }}">
<slot></slot>
</view>
</view>
<i-icon wx:if="{{closable}}" class="i-noticebar-operation" type="close" size="20" color="{{color}}" bindtap="handleClose"></i-icon>
</view>
wxss
.i-noticebar{display:flex;height:72rpx;line-height:72rpx;font-size:14px;color:#f76a24;background-color:#fefcec;overflow:hidden}.i-noticebar-icon{display:flex;margin-left:30rpx;align-items:center}.i-noticebar-icon+view{margin-left:10rpx}.i-noticebar-operation{display:flex;margin-right:16rpx;align-items:center}.i-noticebar-content-wrap{position:relative;flex:1;margin:0 30rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-noticebar-content-wrap .i-noticebar-content{position:absolute;transition-duration:20s}
wxjs
const VALID_MODE = ['closeable'];
const FONT_COLOR = '#f60';
const BG_COLOR = '#fff7cc';
Component({
externalClasses: ['i-class'],
properties: {
closable: {
type: Boolean,
value: false
},
icon: {
type: String,
value: ''
},
loop: {
type: Boolean,
value: false
},
// 背景颜色
backgroundcolor: {
type: String,
value: '#fefcec'
},
// 字体及图标颜色
color: {
type: String,
value: '#f76a24'
},
// 滚动速度
speed: {
type: Number,
value: 1000
}
},
data: {
show: true,
wrapWidth: 0,
width: 0,
duration: 0,
animation: null,
timer: null,
},
detached() {
this.destroyTimer();
},
ready() {
if (this.data.loop) {
this.initAnimation();
}
},
methods: {
initAnimation() {
wx.createSelectorQuery().in(this).select('.i-noticebar-content-wrap').boundingClientRect((wrapRect) => {
wx.createSelectorQuery().in(this).select('.i-noticebar-content').boundingClientRect((rect) => {
const duration = rect.width / 40 * this.data.speed;
const animation = wx.createAnimation({
duration: duration,
timingFunction: "linear",
});
this.setData({
wrapWidth: wrapRect.width,
width: rect.width,
duration: duration,
animation: animation
}, () => {
this.startAnimation();
});
}).exec();
}).exec();
},
startAnimation() {
//reset
if (this.data.animation.option.transition.duration !== 0) {
this.data.animation.option.transition.duration = 0;
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step();
this.setData({
animationData: resetAnimation.export()
});
}
this.data.animation.option.transition.duration = this.data.duration;
const animationData = this.data.animation.translateX(-this.data.width).step();
setTimeout(() => {
this.setData({
animationData: animationData.export()
});
}, 100);
const timer = setTimeout(() => {
this.startAnimation();
}, this.data.duration);
this.setData({
timer,
});
},
destroyTimer() {
if (this.data.timer) {
clearTimeout(this.data.timer);
}
},
handleClose() {
this.destroyTimer();
this.setData({
show: false,
timer: null
});
}
}
});
json里面加上"component": true,这个只是定义了一个组件,下面是引用:
再显示的wxml里添加
<i-notice-bar icon="systemprompt" closable>
2019世界杯,将在6月24日至7月15日举行
</i-notice-bar>
<i-notice-bar icon="systemprompt" loop>
2019世界杯,将在6月24日至7月15日举行
</i-notice-bar>
json
{
"component": true,
"usingComponents": {
"i-notice-bar":"../../dist/notice-bar/index"//这个是你定义的组件的index
}
}
就ok了