Skip to content
This repository has been archived by the owner on Dec 6, 2021. It is now read-only.

Commit

Permalink
fix(noticebar): support more miniapp platforms and relayout codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@b2nil
b2nil committed Jan 21, 2021
1 parent b0a8caf commit 6ce1738
Showing 1 changed file with 149 additions and 139 deletions.
288 changes: 149 additions & 139 deletions src/components/noticebar/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const AtNoticebar = defineComponent({

setup(props: AtNoticeBarProps, { attrs, slots }) {

const env = Taro.getEnv()
const timeout: Ref<NodeJS.Timeout | null> = ref(null)
const interval: Ref<NodeJS.Timer | null> = ref(null)

Expand All @@ -38,15 +39,13 @@ const AtNoticebar = defineComponent({
animElemId: `J_${Math.ceil(Math.random() * 10e5).toString(36)}`,
animationData: { actions: [{}] },
dura: 15,
isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY,
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
isWEB: env === Taro.ENV_TYPE.WEB
})

const rootClass = computed(() => ({
const rootClasses = computed(() => ({
'at-noticebar': true,
'at-noticebar--marquee': props.marquee,
'at-noticebar--weapp': props.marquee && (state.isWEAPP || state.isALIPAY),
'at-noticebar--weapp': props.marquee && (!state.isWEB),
'at-noticebar--single': !props.marquee && props.single
}))

Expand All @@ -58,168 +57,179 @@ const AtNoticebar = defineComponent({
return style
})

const innerContentClass = computed(() => ({
const innerContentClasses = computed(() => ({
'at-noticebar__content-inner': true,
[`${state.animElemId}`]: props.marquee
}))

const iconClass = computed(() => ({
const iconClasses = computed(() => ({
'at-icon': true,
[`at-icon-${props.icon}`]: Boolean(props.icon)
}))

function handleClose(event: CommonEvent): void {
state.show = false
props.onClose && props.onClose(event)
props.onClose?.(event)
}

function onGotoMore(event: CommonEvent): void {
props.onGotoMore && props.onGotoMore(event)
props.onGotoMore?.(event)
}

onMounted(() => {
if (!props.marquee) return
initAnimation()
})

function initAnimation(): void {
const { isWEAPP, isALIPAY } = state
timeout.value = setTimeout(() => {
timeout.value = null
if (state.isWEB) {
const elem = document.querySelector(`.${state.animElemId}`)
function initWebAnimation() {
const elem = document.querySelector(`.${state.animElemId}`)

if (!elem) return
if (!elem) return

const width = elem.getBoundingClientRect().width
state.dura = width / +props.speed!

} else if (isWEAPP || isALIPAY) {
const query = Taro.createSelectorQuery()
query
.select(`.${state.animElemId}`)
.boundingClientRect()
.exec(res => {
const queryRes = res[0]
if (!queryRes) return

const { width } = queryRes
const dura = width / +props.speed!

const animation = Taro.createAnimation({
duration: dura * 1000,
})
const width = elem.getBoundingClientRect().width
state.dura = width / +props.speed!
}

const resetAnimation = Taro.createAnimation({
duration: 0,
})
function initMiniAppAnimation() {
const query = Taro.createSelectorQuery()
query
.select(`.${state.animElemId}`)
.boundingClientRect()
.exec(res => {
const queryRes = res[0]
if (!queryRes) return

const { width } = queryRes
const dura = width / +props.speed!

const animation = Taro.createAnimation({
duration: dura * 1000,
})

const resetAnimation = Taro.createAnimation({
duration: 0,
})

const resetOpacityAnimation = Taro.createAnimation({
duration: 0,
})

const animBody = (): void => {
resetOpacityAnimation.opacity(0).step()
state.animationData = resetOpacityAnimation.export()

setTimeout(() => {
resetAnimation.translateX(0).step()
state.animationData = resetAnimation.export()
}, 300)

setTimeout(() => {
resetOpacityAnimation.opacity(1).step()
state.animationData = resetOpacityAnimation.export()
}, 600)

setTimeout(() => {
animation.translateX(-width).step()
state.animationData = animation.export()
}, 900)
}

animBody()
interval.value = setInterval(animBody, dura * 1000 + 1000)
})
}

const resetOpacityAnimation = Taro.createAnimation({
duration: 0,
})
function initAnimation() {
timeout.value = setTimeout(() => {
timeout.value = null

const animBody = (): void => {
resetOpacityAnimation.opacity(0).step()
state.animationData = resetOpacityAnimation.export()
setTimeout(() => {
resetAnimation.translateX(0).step()
state.animationData = resetAnimation.export()
}, 300)

setTimeout(() => {
resetOpacityAnimation.opacity(1).step()
state.animationData = resetOpacityAnimation.export()
}, 600)

setTimeout(() => {
animation.translateX(-width).step()
state.animationData = animation.export()
}, 900)
}
animBody()
interval.value = setInterval(animBody, dura * 1000 + 1000)
})
}
if (state.isWEB) initWebAnimation()
else initMiniAppAnimation
}, 100)
}

return () => (
state.show && (
h(View, mergeProps(attrs, {
class: rootClass.value
}), {
default: () => [
// close icon
state._close && (
onMounted(() => {
if (!props.marquee) return
initAnimation()
})

return () => {
if (!state.show) return null

const closeIconVNode = h(View, {
class: 'at-noticebar__close',
onTap: handleClose
}, {
default: () => [
h(Text, {
class: 'at-icon at-icon-close'
})
]
})

const contentIconVnode = h(View, {
class: 'at-noticebar__content-icon'
}, {
default: () => [
/* start hack 百度小程序 */
h(Text, {
class: iconClasses.value
})
]
})

const showMoreContentVnode = h(View, {
class: 'at-noticebar__more',
onTap: onGotoMore.bind(this)
}, {
default: () => [
h(Text, {
class: 'text'
}, { default: () => props.moreText }),

h(View, {
class: 'at-noticebar__more-icon'
}, {
default: () => [
h(Text, {
class: 'at-icon at-icon-chevron-right'
})
]
})
]
})

const defaultSlotVnode = h(View, {
id: state.animElemId,
animation: state.animationData,
class: innerContentClasses.value,
style: animationStyle.value,
}, { default: () => slots.default?.() })

return h(View, mergeProps(attrs, {
class: rootClasses.value
}), {
default: () => [
// close icon
state._close && closeIconVNode,
// content
h(View, {
class: 'at-noticebar__content'
}, {
default: () => [
// content icon
props.icon && contentIconVnode,
// content text
h(View, {
class: 'at-noticebar__close',
onTap: handleClose
class: 'at-noticebar__content-text'
}, {
default: () => [
h(Text, { class: 'at-icon at-icon-close' })
// default content slot
defaultSlotVnode,
// show more content
state._showMore && showMoreContentVnode
]
})
),

// content
h(View, {
class: 'at-noticebar__content'
}, {
default: () => [
// content icon
props.icon && (
h(View, {
class: 'at-noticebar__content-icon'
}, {
default: () => [
/* start hack 百度小程序 */
h(Text, { class: iconClass.value })
]
})
),

// content text
h(View, {
class: 'at-noticebar__content-text'
}, {
default: () => [
// default content slot
h(View, {
id: state.animElemId,
animation: state.animationData,
class: innerContentClass.value,
style: animationStyle.value,
}, { default: () => slots.default && slots.default() }),

// show more content
state._showMore && (
h(View, {
class: 'at-noticebar__more',
onTap: onGotoMore.bind(this)
}, {
default: () => [
h(Text, {
class: 'text'
}, { default: () => props.moreText }),

h(View, {
class: 'at-noticebar__more-icon'
}, {
default: () => [
h(Text, { class: 'at-icon at-icon-chevron-right' })
]
})
]
})
)
]
})
]
})
]
})
)
)
]
})
]
})
}
}
})

Expand Down

0 comments on commit 6ce1738

Please sign in to comment.