今天给大家分享一个非常好的实战项目,购物商城,购物商城是一个集购物、娱乐、服务于一体的综合性平台,致力于为消费者提供一站式的购物体验。各种功能都有涉及,最适合实现学习。
做好商城项目,肯定会把开发中遇到的百分之60的技术得到实战的经验。
下面介绍一下 商城的主要模块:
首页
1,搜索框,点击进入搜索页面
2,顶部分类,通过不同分类查询对应信息
3,广告轮播,自动切换图片,可以进行点击进入
4,商品列表,展示每个项目信息,点击可以进入商品详情页面
轮播图使用Swiper实现:
Swiper() {
ForEach(swiperImage, (item: Resource) => {
Image(item)
.width('100%')
.aspectRatio(2.25)
.borderRadius($r('app.float.vp_sixteen'))
.backgroundColor(Color.White)
}, (item: Resource) => JSON.stringify(item))
}
.indicatorStyle({
selectedColor: '#F74E42' }) // 切换选择项颜色
.autoPlay(true) // 自动播放
.itemSpace('14vp')
.width('100%')
.indicator(true) // 是否显示切换小点
.displayCount(1)
.margin({
top: $r('app.float.vp_twelve')
, bottom: $r('app.float.vp_twelve') })
推荐分类实现:
Flex({
justifyContent: FlexAlign.SpaceAround }) {
// 通过ForEach方式实现分类显示
ForEach(activityTitle, (item: ActivityTitleModel, index?: number) => {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Text(item.title)
.fontSize($r('app.float.small_font_size'))
.fontWeight(500)
.fontColor(Color.Black)
Text(item.desc)
.fontSize($r('app.float.small_font_size'))
.fontWeight(400)
.fontColor(this.activityTitleIndex === index ? '#e92f4f' : Color.Black)
.opacity(this.activityTitleIndex === index ? 1 : 0.6)
}
.onClick(() => {
if (index !== undefined) {
this.activityTitleIndex = index;
}
})
.height('100%')
}, (item: ActivityTitleModel) => JSON.stringify(item))
}
.height($r('app.float.activity_title_height'))
.width('100%')
.padding($r('app.float.vp_twelve'))
.margin({
bottom: $r