first commit

历届学生/17届课程/wxShopApp/myWxapp/components/swiper/swiper.js

@@ -0,0 +1,47 @@
+Component({
+  data: {
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    current: 0, // 默认第一张图
+    imgheights: [], //所有图片的高度  
+    height: wx.getSystemInfoSync()['statusBarHeight'] + 50
+  },
+  properties: {
+    // 需要被渲染显示的图片地址数组
+    list: {
+      type: Array,
+      value: []
+    },
+    // 如果父组件自定义顶部导航后，建议传true做边距
+    // 如果没有自定义那么不传数值，默认false，图片和顶部没有边距
+    padding: {
+      type: Boolean,
+      value: false
+    }
+  },
+  methods: {
+    imageLoad: function (e) {//获取图片真实宽度  
+      var imgwidth = e.detail.width,
+          imgheight = e.detail.height,  
+          ratio = imgwidth / imgheight;
+
+      console.log(imgwidth, imgheight)
+      //计算的高度值  
+      var viewHeight = 750 / ratio;
+      var imgheight = viewHeight;
+      var imgheights = this.data.imgheights;
+
+      //把每一张图片的对应的高度记录到数组里  
+      imgheights[e.target.dataset.id] = imgheight;
+      this.setData({
+        imgheights: imgheights
+      })
+    },
+    bindchange: function (e) {
+      // console.log(e.detail.current)
+      this.setData({ current: e.detail.current })
+    },
+  }
+})

历届学生/17届课程/wxShopApp/myWxapp/components/swiper/swiper.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

历届学生/17届课程/wxShopApp/myWxapp/components/swiper/swiper.wxml

@@ -0,0 +1,18 @@
+<view class="swiper" style="padding-top: {{padding ? height : 20}}px;">
+  <swiper indicator-dots="{{indicatorDots}}"
+    autoplay="{{autoplay}}" 
+    interval="{{interval}}" 
+    bindchange="bindchange"
+    style="height:{{imgheights[current]}}rpx;"
+    duration="{{duration}}">
+    <block wx:for="{{list}}" wx:key="index">
+      <swiper-item>
+        <image data-id="{{index}}" 
+               mode="widthFix" 
+               src="{{item}}" 
+               bindload="imageLoad">
+        </image>
+      </swiper-item>
+    </block>
+  </swiper>
+</view>

历届学生/17届课程/wxShopApp/myWxapp/components/swiper/swiper.wxss

@@ -0,0 +1,6 @@
+.swiper{
+  padding-top: 68px;
+}
+image {
+  width: 100%;
+}