使用小程序写一个商城的首页
时间: 2023-09-03 10:16:34 浏览: 54
很好,以下是一个简单的商城首页的小程序代码:
```xml
<!--index.wxml-->
<!--头部-->
<view class="header">
<view class="logo"></view>
<view class="search">
<input placeholder="搜索商品"></input>
<button>搜索</button>
</view>
<view class="cart"></view>
</view>
<!--轮播图-->
<swiper autoplay="true" interval="3000" duration="500">
<swiper-item>
<image src="/images/banner1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner3.jpg"></image>
</swiper-item>
</swiper>
<!--商品分类-->
<view class="category">
<view class="category-item">
<image src="/images/cate1.jpg"></image>
<text>女装</text>
</view>
<view class="category-item">
<image src="/images/cate2.jpg"></image>
<text>男装</text>
</view>
<view class="category-item">
<image src="/images/cate3.jpg"></image>
<text>鞋包</text>
</view>
<view class="category-item">
<image src="/images/cate4.jpg"></image>
<text>美妆</text>
</view>
<view class="category-item">
<image src="/images/cate5.jpg"></image>
<text>母婴</text>
</view>
</view>
<!--推荐商品-->
<view class="recommend">
<view class="recommend-title">为你推荐</view>
<view class="recommend-list">
<view class="recommend-item">
<image src="/images/recommend1.jpg"></image>
<text>商品名称</text>
<text>¥99</text>
</view>
<view class="recommend-item">
<image src="/images/recommend2.jpg"></image>
<text>商品名称</text>
<text>¥199</text>
</view>
<view class="recommend-item">
<image src="/images/recommend3.jpg"></image>
<text>商品名称</text>
<text>¥299</text>
</view>
<view class="recommend-item">
<image src="/images/recommend4.jpg"></image>
<text>商品名称</text>
<text>¥399</text>
</view>
</view>
</view>
```
```css
/*index.wxss*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
padding: 0 20rpx;
}
.logo {
width: 120rpx;
height: 40rpx;
background: url(/images/logo.png) no-repeat center/contain;
}
.search {
display: flex;
align-items: center;
width: 600rpx;
height: 40rpx;
border: 1rpx solid #ccc;
border-radius: 20rpx;
overflow: hidden;
}
.search input {
flex: 1;
height: 100%;
padding: 0 20rpx;
font-size: 24rpx;
border: none;
background: none;
}
.search button {
width: 100rpx;
height: 100%;
font-size: 24rpx;
border: none;
background: #f5222d;
color: #fff;
}
.cart {
width: 60rpx;
height: 40rpx;
background: url(/images/cart.png) no-repeat center/contain;
}
.swiper-item image {
width: 100%;
height: 480rpx;
}
.category {
display: flex;
justify-content: space-between;
align-items: center;
height: 200rpx;
padding: 0 20rpx;
margin-top: 20rpx;
background: #fff;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
width: 120rpx;
}
.category-item image {
width: 80rpx;
height: 80rpx;
margin-bottom: 10rpx;
}
.category-item text {
font-size: 28rpx;
}
.recommend {
margin-top: 20rpx;
background: #fff;
}
.recommend-title {
font-size: 32rpx;
padding: 20rpx;
}
.recommend-list {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
}
.recommend-item {
display: flex;
flex-direction: column;
align-items: center;
width: 240rpx;
margin: 20rpx 10rpx;
}
.recommend-item image {
width: 100%;
height: 240rpx;
margin-bottom: 10rpx;
}
.recommend-item text {
font-size: 28rpx;
}
```
这是一个简单的商城首页,其中包括了头部、轮播图、商品分类和推荐商品等模块。你可以根据自己的需求进行修改和扩展。