微信小程序电商实战（-）商城首页

首先在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