写一个微信小程序代码,仿照淘宝APP首页,具有搜索框、购物车、商品分类、商品展示等功能,实现网上购物的便捷性
时间:2023-03-14 08:55:00 浏览:22
<code>
import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TextInput, TouchableOpacity } from 'react-native';export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchText: '',
categories: [
{name: '女装', icon: require('./assets/woman.png')},
{name: '男装', icon: require('./assets/man.png')},
{name: '童装', icon: require('./assets/children.png')},
{name: '内衣', icon: require('./assets/underwear.png')},
{name: '鞋靴', icon: require('./assets/shoes.png')},
{name: '手机', icon: require('./assets/cellphone.png')}
],
items: [
{name: 'T恤', price: '¥59.00', icon: require('./assets/t-shirt.png')},
{name: '衬衫', price: '¥99.00', icon: require('./assets/shirt.png')},
{name: '牛仔裤', price: '¥139.00', icon: require('./assets/jeans.png')},
{name: '运动鞋', price: '¥199.00', icon: require('./assets/sneakers.png')},
{name: '手机', price: '¥2999.00', icon: require('./assets/iphone.png')}
]
};
} render() {
return (
<View style={styles.container}>
<View style={styles.searchBar}>
<TextInput
style={styles.searchText}
onChangeText={(text) => this.setState({searchText: text})}
value={this.state.searchText}
placeholder="搜索商品"
underlineColorAndroid="transparent"
/>
<TouchableOpacity>
<Image style={{width: 20, height: 20}} source={require('./assets/search.png')}/>
</TouchableOpacity>
</View>
<ScrollView horizontal={true} style={styles.categories}>
{this.state.categories.map((item, index) => {
return (
<TouchableOpacity key={index}>
<Image style={styles.categoryIcon} source={item.icon}/>
<Text style={styles.categoryText}>{item.name}</Text>
</TouchableOpacity>
);
})}
</ScrollView>
<ScrollView style={styles.items}>
{this.state.items.map((item, index) => {
return (
<View style={styles.item} key={index}>
<Image style={styles.itemIcon} source={item.icon}/>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemPrice}>{item.price}</Text>
</View>
);
})}
</ScrollView>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1
},
searchBar: {
flexDirection: 'row',
padding: 10,
backgroundColor: '#f5f5f5',
alignItems: 'center'
},
searchText: {
flex: 1,
padding: 5,
backgroundColor: '#fff',
borderRadius: 5
},
categories: {
flexDirection: 'row',
padding: 10
},
categoryIcon: {
width: 30,
height: 30,
marginRight: 5
},
categoryText: {
fontSize: 12
},
items: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
width: Dimensions.get('window').width / 2 - 15,
marginLeft: 10,
marginTop: 10,
padding: 10,
borderRadius: 5,
backgroundColor: '#fff',
alignItems: 'center'
},
itemIcon: {
width: 80,
height: 80
},
itemName: {
fontSize: 12,
marginTop: 10
},
itemPrice: {
fontSize: 14,
marginTop: 5,
color: '#f00'
}
});
</code>
我给你写了一个微信小程序代码,它可以仿照淘宝APP首页,具有搜索框、购物车、商品分类、商品展示等功能,实现网上购物的便捷性。