<view>
  <swiper indicator-dots="{{indicatorDots}}" 
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="category">
  <view class="category_item" wx:for="{{iconArray}}">
    <view class="category_item_wrap">
      <view class="icon_wrap">
        <image src="{{item.iconUrl}}" class="index_icon"></image>
      </view>
      <view class="category_item_text">
        <text>{{item.iconText}}</text>
      </view>
    </view>
  </view>
</view>
<view>
  <view class="singal_item" wx:for="{{itemArray}}">
    <view class="singal_item_title">
      <text>{{item.itemText}}</text>
    </view>
    <view class="singal_item_image">
      <image bindload="cusImageLoad" src="{{item.itemUrl}}" style="width: {{imageWidth}};height: {{imageHeight}}"></image>
    </view>
  </view>
</view>
<view>
  <view class="commen_title">
    <text>猜你喜欢</text>
  </view>
  <view class="single_goods">
    <view class="single_image_wrap">
      <image src="../../image/zhutu.jpg" class="single_goods_image"></image>
    </view>
    <view class="single_goods_infor">
      <navigator url="../spdetail/spdetail">
        <view class="single_goods_name">
          <text>木村耀司登山旅行大学生户外情侣双肩背包外带小背包</text>
        </view>
        <view class="single_goods_address">
          <text>诸暨</text>
        </view>
        <view class="single_goods_price">
          <text>¥169.00</text>
          <view class="carImgWrap">
            <image src="../../image/car.png" class="carImg"></image>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

.swiper-item{
  display: block;
}
.slide-image {
  width: 100%;
}
swiper {
  width: 100%;
}
.category {
  padding: 15px 0 10px 0;
  overflow: auto;
  background-color: #FFF;
  margin-bottom: 10px;
}
.category_item {
  width: 25%;
  float: left;
  margin-bottom: 10px;
}
.icon_wrap {
  width: 40px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.index_icon {
  width: 40px;
  height: 40px;
}
.category_item_text {
  text-align: center;
  font-size: 13px;
  color: #737373;
}
.singal_item {
  text-align: center;
  background-color: #FFF;
  margin-bottom: 10px;
}
.singal_item_title {
  padding: 12px;
  font-size: 16px;
}
.singal_item_image {
  line-height: 0;
}
.commen_title {
  padding: 10px;
  background-color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #E9E9E9;
}
.single_goods_image {
  width: 80px;
  height: 80px;
}
.single_goods {
  position: relative;
  height: 100px;
  background-color: #FFF;
  padding-left: 100px;
  border-bottom: 1px solid #E7E7EB;
}
.single_image_wrap {
  position: absolute;
  top: 10px;
  left: 10px;
}
.single_goods_infor {
  padding: 10px 0;
  position: relative;
  height: 80px;
}
.single_goods_name {
  font-size: 14px;
}
.single_goods_price {
  font-size: 14px;
  color: #FF1493;
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 22px;
  line-height: 22px;
}
.single_goods_address {
  color: #929292;
  font-size: 12px;
}
.carImgWrap {
  float: right;
  margin-right: 15px;
}
.carImg {
  width: 20px;
  height: 20px;
}

var WxAutoImage = require('../../js/wxAutoImageCal.js');
var app = getApp();

Page({
    data: {
        imgUrls: [
            '../../image/swiper1.jpg',
            '../../image/swiper1.jpg',
            '../../image/swiper1.jpg'
        ],
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 3000,
        duration: 1200,
        iconArray: [
            {
                "iconUrl": '../../image/icon-qiandao.png',
                "iconText": '签到'
            },
            {
                "iconUrl": '../../image/icon-fujin.png',
                "iconText": '附近'
            },
            {
                "iconUrl": '../../image/icon-zhanhui.png',
                "iconText": '游展'
            },
            {
                "iconUrl": '../../image/icon-fuli.png',
                "iconText": '福利'
            },
            {
                "iconUrl": '../../image/icon-muma.png',
                "iconText": '玩乐'
            },
            {
                "iconUrl": '../../image/icon-xingxing.png',
                "iconText": '周边'
            },
            {
                "iconUrl": '../../image/icon-tiyu.png',
                "iconText": '体育'
            },
            {
                "iconUrl": '../../image/icon-qinzi.png',
                "iconText": '亲子'
            }
        ],
        itemArray: [
            {
                "itemUrl": '../../image/huaju.jpeg',
                "itemText": '11月20日话剧《风声》'
            },
            {
                "itemUrl": '../../image/huaju.jpeg',
                "itemText": '11月20日话剧《原野》'
            },
            {
                "itemUrl": '../../image/huaju.jpeg',
                "itemText": '11月28日“夜店”演唱会'
            },
        ]
    },
    cusImageLoad: function(e){
        var that = this;
        that.setData(WxAutoImage.wxAutoImageCal(e));
    }
})