v2.0.2

v2.0.2 2.0版本上线

demo/pages/component/swiper/swiper.js

@@ -0,0 +1,104 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    cardCur: 0,
+    tower: [{
+      id: 0,
+      url: 'https://image.weilanwl.com/img/4x3-1.jpg'
+    }, {
+      id: 1,
+      url: 'https://image.weilanwl.com/img/4x3-2.jpg'
+    }, {
+      id: 2,
+      url: 'https://image.weilanwl.com/img/4x3-3.jpg'
+      }, {
+        id: 3,
+        url: 'https://image.weilanwl.com/img/4x3-4.jpg'
+      }, {
+        id: 4,
+        url: 'https://image.weilanwl.com/img/4x3-2.jpg'
+      }, {
+        id: 5,
+        url: 'https://image.weilanwl.com/img/4x3-4.jpg'
+      }, {
+        id: 6,
+        url: 'https://image.weilanwl.com/img/4x3-2.jpg'
+      }]
+  },
+  onLoad() {
+    this.towerSwiper('tower');
+    // 初始化towerSwiper 传已有的数组名即可
+  },
+  DotStyle(e) {
+    this.setData({
+      DotStyle: e.detail.value
+    })
+  },
+  // cardSwiper
+  cardSwiper(e) {
+    this.setData({
+      cardCur: e.detail.current
+    })
+  },
+  // towerSwiper
+  // 初始化towerSwiper
+  towerSwiper(name) {
+    let list = this.data[name];
+
+    for (let i = 0; i < list.length; i++) {
+      list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
+      list[i].mLeft = i - parseInt(list.length / 2)
+    }
+    this.setData({
+      towerList: list
+    })
+  },
+
+  // towerSwiper触摸开始
+  towerStart(e) {
+    this.setData({
+      towerStart: e.touches[0].pageX
+    })
+  },
+
+  // towerSwiper计算方向
+  towerMove(e) {
+    this.setData({
+      direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
+    })
+  },
+
+  // towerSwiper计算滚动
+  towerEnd(e) {
+    let direction = this.data.direction;
+    let list = this.data.towerList;
+    if (direction == 'right') {
+      let mLeft = list[0].mLeft;
+      let zIndex = list[0].zIndex;
+      for (let i = 1; i < list.length; i++) {
+        list[i - 1].mLeft = list[i].mLeft
+        list[i - 1].zIndex = list[i].zIndex
+      }
+      list[list.length - 1].mLeft = mLeft;
+      list[list.length - 1].zIndex = zIndex;
+      this.setData({
+        towerList: list
+      })
+    } else {
+      let mLeft = list[list.length - 1].mLeft;
+      let zIndex = list[list.length - 1].zIndex;
+      for (let i = list.length - 1; i > 0; i--) {
+        list[i].mLeft = list[i - 1].mLeft
+        list[i].zIndex = list[i - 1].zIndex
+      }
+      list[0].mLeft = mLeft;
+      list[0].zIndex = zIndex;
+      this.setData({
+        towerList: list
+      })
+    }
+    console.log(list);
+  },
+});

demo/pages/component/swiper/swiper.json

@@ -0,0 +1 @@
+{}

demo/pages/component/swiper/swiper.wxml

@@ -0,0 +1,41 @@
+<custom style="height:{{CustomBar}}px;">
+  <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 轮播图
+    </navigator>
+  </bar>
+</custom>
+<bar>
+  <view class='action'>
+    <icon class='icon-title text-pink' /> 全屏限高轮播
+  </view>
+  <view class='action'>
+    <switch class='sm' bindchange='DotStyle'></switch>
+  </view>
+</bar>
+<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
+  <swiper-item wx:for="{{4}}" wx:key>
+    <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
+  </swiper-item>
+</swiper>
+<bar class="margin-top">
+  <view class='action'>
+    <icon class='icon-title text-pink' /> 卡片式轮播
+  </view>
+</bar>
+<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
+  <swiper-item wx:for="{{4}}" wx:key class="{{cardCur==index?'cur':''}}">
+    <view class='bg-img shadow-blur' style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"></view>
+  </swiper-item>
+</swiper>
+
+<bar class="margin-top">
+  <view class='action'>
+    <icon class='icon-title text-pink' /> 堆叠式轮播
+  </view>
+</bar>
+<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
+  <view class='tower-item {{item.zIndex==1?"none":""}}' wx:for="{{towerList}}" wx:key style='transform: scale({{0.5+item.zIndex/10}});margin-left:{{item.mLeft*100-150}}rpx;z-index:{{item.zIndex}}'>
+    <view class='bg-img shadow-blur' style="background-image:url({{item.url}})"></view>
+  </view>
+</view>

demo/pages/component/swiper/swiper.wxss

@@ -0,0 +1 @@
+/* pages/component/swiper/swiper.wxss */