无需原生开发基础,也能完美呈现京东商城。《混合开发京东商城系统,提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术,混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合,从技术原理到开发上线,让你真实感受到一个明星产品开发的全过程。功能实现之外,还有一流用户体验和优秀交互设计等你一探究竟,拓宽开发眼界。
基于ReactNative的广告页面组件,可直接引入使用。引入方式
var AdvertisingView = require('./AdvertisingView');
render() {
return (
<View>
<AdvertisingView />
</View>
);
}
JsonData数据
{
"data": [
{
"img" : "img_01",
"title" : "你那一笑倾国倾城"
},
{
"img" : "img_02",
"title" : "那里记录了最唯美的爱情故事"
},
{
"img" : "img_03",
"title" : "我怎么是一个剩女"
},
{
"img" : "img_04",
"title" : "生命中最后的四分钟"
},
{
"img" : "img_05",
"title" : "我们都需要治疗"
}
]
}
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image
} from 'react-native';
//引入react-timer-mixin定时器
var TimeMiXin = require('react-timer-mixin');
var dimensions = require('Dimensions');
var {width} = dimensions.get('window');
var jsonData = require('./ImageData.json').data;
var AdvertisingView = React.createClass({
mixins:[TimeMiXin],
getDefaultProps(){
return{
scrollTime:2000
}
},
getInitialState(){
return {
currentPage:0,
}
},
render(){
return(
<View>
<ScrollView
ref = 'scrollView'
style = {{marginTop:64}}
//横向滚动
horizontal = {true}
//自动分页
pagingEnabled = {true}
//滑动时关闭键盘
keyboardDismissMode = 'on-drag'
//隐藏横向滚动条
showsHorizontalScrollIndicator = {false}
//回弹事件取消
alwaysBounceHorizontal = {false}
//回弹事件取消
bounces = {false}
//每一帧滑动结束的时候回调
onMomentumScrollEnd = {this.scrollEnd}
//开始拖拽时调用
onScrollBeginDrag = {this.beginDrag}
//停止托转时调用
onScrollEndDrag = {this.endDrag}>
{this.returnImageView()}
</ScrollView>
<View style={styles.navView}>
{this.returnNavPointView()}
</View>
</View>
);
},
// render 方法执行完毕之后调用
componentDidMount(){
this.startTimeout();
},
// 组件将要被卸载的时候调用
componentWillUnmount(){
// 如果存在this.timer,则使用clearTimeout清空。
// 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
this.timer && clearTimeout(this.timer);
},
// 开启定时器
startTimeout(){
//获取scrollView
var scrollView = this.refs.scrollView;
//开启定时器
this.timer = setInterval(
() => {
var addPage = this.state.currentPage + 1;
addPage = addPage == jsonData.length ? 0 : addPage;
this.setState({
currentPage:addPage,
});
// scrollView.scrollTo({x:addPage * width,y:0,animated:true});
scrollView.scrollResponderScrollTo({x:addPage * width,y:0,animated:true});
},
this.props.scrollTime
);
},
returnImageView(){
var returnViewArr = [];
for (var i = 0 ; i < jsonData.length ; i++){
var imgData = jsonData[i];
returnViewArr.push(
<Image key={i} source={{uri:imgData.img}} style={styles.LunBoImage}/>
);
}
return returnViewArr;
},
returnNavPointView(){
var returnViewArr = [];
for (var i = 0 ; i < jsonData.length ; i ++){
if (this.state.currentPage == i){
returnViewArr.push(
<View key={i} style={styles.navCurrentPoint}></View>
);
}else{
returnViewArr.push(
<View key={i} style={styles.navPoint}></View>
);
}
}
return returnViewArr;
},
// 滑动结束时候的回调
scrollEnd(event){
// 获取水平方向的偏移量
var offsetX = event.nativeEvent.contentOffset.x;
// 计算页数
var page = Math.floor(offsetX / width);
// 设置当前的page
this.setState({
currentPage:page
});
// 判断当前的page页,如果page页为第一个或者最后一个的话,需要进行额外操作
if (page == 0){
}else if(page == jsonData.length){
}
},
// 当用户开始托转的时候定制定时器
beginDrag(event){
this.timer && clearTimeout(this.timer);
},
// 当用户停止拖拽的时候调用
endDrag(event){
this.startTimeout();
}
});
const styles = StyleSheet.create({
LunBoImage:{
width:width,
height:160
},
navView:{
width:width,
height:25,
marginTop:-25,
backgroundColor:'rgba(14,14,14,0.4)',
flexDirection:'row',
alignItems:'center'
},
navPoint:{
width:10,
height:10,
backgroundColor:'white',
borderRadius:5,
marginLeft:8
},
navCurrentPoint:{
width:10,
height:10,
backgroundColor:'#2f91f4',
borderRadius:5,
marginLeft:8
}
});
module.exports = AdvertisingView;