首先在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\' }) } })
到这里，一个精美的微信小程序商城首页就呈现给大家了，如果发现有什么问题，可以留言交流。
后续会慢慢更新一个完整的项目。如果您看了觉得对您有帮助，请支持一下，谢谢
