5 changed files with 0 additions and 234 deletions
Unified View
Diff Options
-
121components/notice-bar3/index.js
-
4components/notice-bar3/index.json
-
15components/notice-bar3/index.wxml
-
45components/notice-bar3/index.wxss
-
49components/notice-bar3/node-util.js
@ -1,121 +0,0 @@ |
|||||
import nodeUtil from './node-util'; |
|
||||
|
|
||||
Component({ |
|
||||
externalClasses: ['l-class', 'l-icon-class'], |
|
||||
options: { |
|
||||
addGlobalClass: true, |
|
||||
}, |
|
||||
properties: { |
|
||||
type: { |
|
||||
type: String, |
|
||||
value: 'still' |
|
||||
}, |
|
||||
// 轮播数组
|
|
||||
swipArr: Array, |
|
||||
// 前置图标
|
|
||||
icon: { |
|
||||
type: String, |
|
||||
value: '' |
|
||||
}, |
|
||||
endIconSize: { |
|
||||
type: Number, |
|
||||
value: 28 |
|
||||
}, |
|
||||
endIconColor: { |
|
||||
type: String, |
|
||||
value: '#3683D6' |
|
||||
}, |
|
||||
// 背景颜色
|
|
||||
backgroundcolor: { |
|
||||
type: String, |
|
||||
value: '#DFEDFF' |
|
||||
}, |
|
||||
// 字体及图标颜色
|
|
||||
color: { |
|
||||
type: String, |
|
||||
value: '#333333' |
|
||||
}, |
|
||||
// 滚动速度
|
|
||||
speed: { |
|
||||
type: Number, |
|
||||
value: 1500 |
|
||||
}, |
|
||||
show: { |
|
||||
type: Boolean, |
|
||||
value: true |
|
||||
}, |
|
||||
loop: { |
|
||||
type: Boolean, |
|
||||
value: false |
|
||||
}, |
|
||||
close: { |
|
||||
type: Boolean, |
|
||||
value: false |
|
||||
} |
|
||||
}, |
|
||||
data: { |
|
||||
wrapWidth: 0, |
|
||||
width: 0, |
|
||||
duration: 0, |
|
||||
animation: null, |
|
||||
timer: null, |
|
||||
}, |
|
||||
detached() { |
|
||||
this.destroyTimer() |
|
||||
}, |
|
||||
ready() { |
|
||||
if (this.properties.type === 'roll' && this.properties.show) { |
|
||||
this.initAnimation() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async initAnimation() { |
|
||||
if(!this.data.animation){ |
|
||||
const rect = await nodeUtil.getNodeRectFromComponent(this, '.l-noticebar-content') |
|
||||
const wrapRect = await nodeUtil.getNodeRectFromComponent(this, '.l-noticebar-content-wrap') |
|
||||
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() |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
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() |
|
||||
if(this.data.loop){ |
|
||||
this.triggerEvent('loop') |
|
||||
} |
|
||||
}, this.data.duration) |
|
||||
this.setData({ timer }) |
|
||||
}, |
|
||||
destroyTimer() { |
|
||||
if (this.data.timer) { |
|
||||
clearTimeout(this.data.timer) |
|
||||
} |
|
||||
}, |
|
||||
handleTap() { |
|
||||
this.triggerEvent('click', {}, { bubbles: true, composed: true }) |
|
||||
this.setData({ timer: null }) |
|
||||
}, |
|
||||
onSwip(e) { |
|
||||
this.triggerEvent('lintap', { ...e.currentTarget.dataset }, { bubbles: true, composed: true }) |
|
||||
}, |
|
||||
onIconTap() { |
|
||||
this.triggerEvent('linicontap', {}, { bubbles: true, composed: true }) |
|
||||
this.setData({ timer: null }) |
|
||||
}, |
|
||||
onClose() { |
|
||||
this.setData({ timer: null, show: false }) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
@ -1,4 +0,0 @@ |
|||||
{ |
|
||||
"component": true, |
|
||||
"usingComponents": {} |
|
||||
} |
|
||||
@ -1,15 +0,0 @@ |
|||||
<view wx:if="{{ show }}" class="l-class l-noticebar" style="color: {{ color }};background-color: {{ backgroundcolor }}"> |
|
||||
<text wx:if="{{icon}}" class="cuIcon-{{icon}} text-gray" style="font-size:36rpx;margin:0rpx 16rpx 0rpx 24rpx;color:{{color}}"></text> |
|
||||
<!-- <image wx:if="{{icon}}" style="width:230rpx;height:60rpx" src="/assets/image/ico_notice.png"></image> --> |
|
||||
<swiper autoplay vertical interval="{{4*speed}}" circular="{{true}}" class="l-noticebar-content-wrap" wx:if="{{type=='swip'}}"> |
|
||||
<block wx:for="{{swipArr}}" wx:key="swip"> |
|
||||
<swiper-item data-index="{{index}}" mut-bind:tap="onSwip">{{item}}</swiper-item> |
|
||||
</block> |
|
||||
</swiper> |
|
||||
<view class="l-noticebar-content-wrap l-noticebar-content-wrap-view" wx:else> |
|
||||
<view class="l-noticebar-content" mut-bind:tap="handleTap" animation="{{ animationData }}"> |
|
||||
<slot></slot> |
|
||||
</view> |
|
||||
</view> |
|
||||
<text wx:if="{{close}}" class="cuIcon-{{mode}} text-gray" style="font-size:36rpx;color:{{color}}" bindtap="onClose"></text> |
|
||||
</view> |
|
||||
@ -1,45 +0,0 @@ |
|||||
.l-noticebar { |
|
||||
display: flex; |
|
||||
height: 60rpx; |
|
||||
width: 750rpx; |
|
||||
line-height: 60rpx; |
|
||||
padding-right: 32rpx; |
|
||||
font-size: 28rpx; |
|
||||
/* color: #008AFF; */ |
|
||||
/* background-color: #dfedff; */ |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.l-noticebar-icon { |
|
||||
display: flex; |
|
||||
margin-left: 32rpx; |
|
||||
margin-right: 8rpx; |
|
||||
align-items: center |
|
||||
} |
|
||||
|
|
||||
.l-noticebar-icon+.l-noticebar-content-wrap-view { |
|
||||
margin-left: 5rpx; |
|
||||
} |
|
||||
|
|
||||
.l-noticebar-operation { |
|
||||
display: flex; |
|
||||
margin-right: 16rpx; |
|
||||
margin-left: 8rpx; |
|
||||
align-items: center |
|
||||
} |
|
||||
|
|
||||
.l-noticebar-content-wrap { |
|
||||
display: flex; |
|
||||
margin-left: 5rpx; |
|
||||
flex: 1; |
|
||||
height: 60rpx; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap |
|
||||
} |
|
||||
|
|
||||
.l-noticebar-content-wrap .l-noticebar-content { |
|
||||
position: absolute; |
|
||||
transition-duration: 20s |
|
||||
} |
|
||||
@ -1,49 +0,0 @@ |
|||||
class NodeUtil { |
|
||||
/** |
|
||||
* 获取组件内部节点位置信息(单个) |
|
||||
* @param component 组件实例 |
|
||||
* @param selector {String} css选择器 |
|
||||
* @returns boundingClientRect() 回调函数的值 |
|
||||
*/ |
|
||||
async getNodeRectFromComponent(component, selector) { |
|
||||
return await new Promise((resolve) => { |
|
||||
component |
|
||||
.createSelectorQuery() |
|
||||
.select(selector) |
|
||||
.boundingClientRect((res) => { |
|
||||
resolve(res); |
|
||||
}).exec(); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取组件内部节点位置信息(多个) |
|
||||
* @param component 组件实例 |
|
||||
* @param selector {String} css选择器 |
|
||||
* @returns boundingClientRect() 回调函数的值 |
|
||||
*/ |
|
||||
async getNodesRectFromComponent(component, selector) { |
|
||||
return await new Promise((resolve) => { |
|
||||
component |
|
||||
.createSelectorQuery() |
|
||||
.selectAll(selector) |
|
||||
.boundingClientRect((res) => { |
|
||||
resolve(res); |
|
||||
}).exec(); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
async getNodeFieldsFromComponent(component, selector, fields) { |
|
||||
return await new Promise((resolve) => { |
|
||||
component |
|
||||
.createSelectorQuery() |
|
||||
.select(selector) |
|
||||
.fields(fields, (res) => { |
|
||||
resolve(res); |
|
||||
}).exec(); |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const nodeUtil = new NodeUtil(); |
|
||||
export default nodeUtil; |
|
||||
Write
Preview
Loading…
Cancel
Save