-
Notifications
You must be signed in to change notification settings - Fork 0
/
SwiperDiy.js
93 lines (88 loc) · 2.28 KB
/
SwiperDiy.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Animated,
} from 'react-native';
import SwiperItem from './SwiperTDZL';
export default class SwiperDiy extends Component {
//构造
constructor(props)
{
super(props);
this.state = {
};
}
//数据加载完毕后执行
componentDidMount() {
}
//基本方法, 默认执行
render() {
let obj = {
open3D: true, //开启3D
radius: 0, //3D半径
autoPlay: true, //自动轮播
playTime: 300, //播放间隔
playNumber: 0, //播放轮数 (数值大于0时有效)
friction: 4, //摩擦力
tension: 90, //张力
direction: 'right', //默认方向(顺时针)
};
return (
<View style={styles.swiperBox}>
<SwiperItem style={styles.swiper} {...obj}>
<View style={[styles.page, styles.page1]}>
<Text style={styles.pageText}>我是第一页</Text>
</View>
<View style={styles.page}>
<Text style={styles.pageText}>我是第二页</Text>
</View>
<View style={[styles.page, styles.page3]}>
<Text style={styles.pageText}>我是第三页</Text>
</View>
<View style={[styles.page, styles.page4]}>
<Text style={styles.pageText}>我是第四页</Text>
</View>
</SwiperItem>
</View>
);
}
};
const styles = StyleSheet.create({
swiperBox: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
},
swiper: {
height: 240,
},
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
page1: {
backgroundColor : 'red',
},
page2: {
backgroundColor: 'green',
},
page3: {
backgroundColor: 'blue',
},
page4: {
backgroundColor: '#552'
},
page5: {
backgroundColor: '#698',
},
page6: {
backgroundColor: '#487',
},
pageText: {
fontSize: 16,
color : '#fff',
},
});