微信小程序电商实战（

<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>

.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
//获取应用实例
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'
        })
    }
})