|
@@ -0,0 +1,59 @@
|
|
|
+import React,{Component} from "react";
|
|
|
+import {View} from '@tarojs/components'
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import { AtIcon } from 'taro-ui'
|
|
|
+import './index.less';
|
|
|
+
|
|
|
+import "taro-ui/dist/style/components/icon.scss";
|
|
|
+
|
|
|
+class MessageNoticebar extends Component{
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state={
|
|
|
+ animationData:{}
|
|
|
+ }
|
|
|
+ this.onClose = this.onClose.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount () {
|
|
|
+ let animation = Taro.createAnimation({
|
|
|
+ duration: 1000,
|
|
|
+ timingFunction: 'ease',
|
|
|
+ })
|
|
|
+
|
|
|
+ this.animation = animation
|
|
|
+
|
|
|
+ this.setState({
|
|
|
+ animation:animation.export()
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ Taro.eventCenter.on('GoPuncsshIn', () => {
|
|
|
+ this.animation.translateX(-235).step()
|
|
|
+ this.setState({
|
|
|
+ animation: this.animation.export()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onClose(){
|
|
|
+ this.animation.translateX(235).step()
|
|
|
+ this.setState({
|
|
|
+ animation: this.animation.export()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View className='messageNoticebar' animation={this.state.animation}>
|
|
|
+ <View className='title'>
|
|
|
+ <View>消息通知</View>
|
|
|
+ <AtIcon value='close' size='10' onClick={this.onClose}/>
|
|
|
+ </View>
|
|
|
+ <View className='messageNoticebarContent'>内容1内容1内容1内容1内容1内容1内容1内容1内容1</View>
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default MessageNoticebar;
|