首先在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'
})
}})
到这里，一个精美的微信小程序商城首页就呈现给大家了，如果发现有什么问题，可以留言交流。