首先在app.json中配置页面和底部tabbar
{
"pages":[
"pages/index/index",
"pages/kind/kind",
"pages/car/car",
"pages/my/my"
],
"window":{
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#50a7e4",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "#fff",
"enablePullDownRefresh": "true"
},
"tabBar": {
"color": "#666",
"selectedColor": "#41a5e5",
"fontSize": "28rpx",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/home.png",
"selectedIconPath": "pages/images/home_in.png"
},
{
"pagePath": "pages/kind/kind",
"text": "分类",
"iconPath": "pages/images/kind.png",
"selectedIconPath": "pages/images/kind_in.png"
},
{
"pagePath": "pages/car/car",
"text": "购物车",
"iconPath": "pages/images/car.png",
"selectedIconPath": "pages/images/car_in.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "pages/images/mine.png",
"selectedIconPath": "pages/images/mine_in.png"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
正式开始写代码了，首先是index.wxml
<scroll-view scroll-y="true">
<!-- 轮播图部分开始 -->
<view class="banner">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(228,228,228,1)" indicator-active-color="#FECA49">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="200" />
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播图部分结束 -->
<!-- 搜索部分开始 -->
<view class="search" bindtap='search'>
<image src="../images/search.png"></image>
<text>搜索商品</text>
</view>
<!-- 搜索部分结束 -->
<!-- 特价列表开始 -->
<view class="specialPrice">
<view class="title">今日特价</view>
<block wx:for="{{goodsList}}">
<view class="goodsList">
<image class="goodsPic" src='{{item.imgUrl}}' bindtap='goToDetail'></image>
<view class="goodsInfo">
<view class="goodsTitle ellipsis2">{{item.title}}</view>
<view class="price">
<text class="fl newPrice">￥{{item.newPrice}}</text>
<text class="fl oldPrice">￥{{item.oldPrice}}</text>
<view>
<image class="fr car1" src='../images/car1.png' bindtap='showCar' data-id="{{item.id}}"></image>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 特价列表结束 -->
</scroll-view>
接着index.wxss
.banner {
width: 100%;
}
swiper {
height: 240rpx;
}
image {
width: 100%;
display: block;
}
.kindList {
padding-top: 20rpx;
background: #fff;
}
.kindList .flex-item {
float: left;
width: 25%;
text-align: center;
}
.flex-item image {
width: 100rpx;
height: 100rpx;
margin: 0 auto;
}
.imageGroup image {
width: 100px;
height: 100px;
}
.flex-item text {
text-align: center;
padding: 10rpx 0 20rpx;
display: block;
font-size: 28rpx;
}
.search {
display: -webkit-flex;
display: flex;
align-items: center;
width: 86%;
padding: 12rpx 0;
margin: 30rpx auto;
border: 1px solid #d8d8d8;
border-radius: 16rpx;
background: #fff;
color: #999;
}
.search image {
width: 40rpx;
height: 40rpx;
margin: 0 10rpx;
}
.specialPrice {
padding: 0 30rpx;
}
.title {
margin: 20rpx 0;
border-bottom: 1px solid #d8d8d8;
padding-bottom: 10rpx;
font-size: 36rpx;
font-weight: bold;
}
.goodsList {
padding: 20rpx;
border-bottom: 1px solid #d8d8d8;
display: -webkit-flex;
display: flex;
}
.goodsList:last-child {
border-bottom: none;
}
.goodsList .goodsPic {
width: 180rpx;
height: 180rpx;
border: 1px solid #d8d8d8;
}
.goodsInfo {
padding: 0 20rpx;
position: relative;
flex: 1;
}
.goodsTitle {
font-size: 32rpx;
font-family: '微软雅黑';
}
.price {
position: absolute;
left: 20rpx;
bottom: 0;
width: 100%;
display: -webkit-flex;
display: flex;
align-items: flex-end;
}
.price .newPrice {
font-size: 36rpx;
margin-top: 10rpx;
margin-right: 10rpx;
}
.price .oldPrice {
text-decoration: line-through;
color: #d8d8d8;
font-size: 28rpx;
margin-top: 20rpx;
align-items: -webkit-flex-end;
}
.price view {
flex: 1;
}
.car1 {
width: 56rpx;
height: 56rpx;
background: #50a7e4;
border-radius: 50%;
}
最后是index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
hidden: true,
count: '1',
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000,
goodsList: [
{
id: 132,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/858568558/TB2JQ.tbnAKL1JjSZFCXXXFspXa_!!858568558.jpg_b.jpg',
title: '特仑苏整箱装特仑苏整箱装',
oldPrice: 56,
newPrice: 40
},
{
id: 122,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i4/725677994/TB1nWgGaHsTMeJjy1zeXXcOCVXa_!!2-item_pic.png_b.jpg',
title: '卫龙辣条100g装',
oldPrice: 4,
newPrice: 3
},
{
id: 302,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i3/494858290/TB1.jYocxHI8KJjy1zbXXaxdpXa_!!0-item_pic.jpg_b.jpg',
title: '洁丽雅纯棉毛巾',
oldPrice: 9.9,
newPrice: 8.8
},
{
id: 498,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/858568558/TB2JQ.tbnAKL1JjSZFCXXXFspXa_!!858568558.jpg_b.jpg',
title: '特仑苏整箱装特仑苏整箱装',
oldPrice: 56,
newPrice: 40
},
{
id: 588,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i4/725677994/TB1nWgGaHsTMeJjy1zeXXcOCVXa_!!2-item_pic.png_b.jpg',
title: '卫龙辣条100g装',
oldPrice: 4,
newPrice: 3
},
{
id: 600,
imgUrl: 'https://img.alicdn.com/bao/uploaded/i3/494858290/TB1.jYocxHI8KJjy1zbXXaxdpXa_!!0-item_pic.jpg_b.jpg',
title: '洁丽雅纯棉毛巾',
oldPrice: 9.9,
newPrice: 8.8
}
]
},
onLoad: function () {
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})
wx.getSystemInfo({
success: function (res) {
that.setData({
height: res.windowHeight + 'px'
});
}
})
},
search: function (e) {
wx.navigateTo({
url: '/pages/search/search'
})
}
})
到这里，一个精美的微信小程序商城首页就呈现给大家了，如果发现有什么问题，可以留言交流。
后续会慢慢更新一个完整的项目。如果您看了觉得对您有帮助，请支持一下，谢谢
