组件

app.json

@@ -362,7 +362,8 @@
         "dk-list-report": "components/dkbase/dk-list-report/dk-list-report",
         "dk-goos-list": "components/dkbase/dk-goos-list/dk-goos-list",
         "dk-stepper": "components/dkbase/dk-stepper/dk-stepper",
-        "dk-navbar": "components/dkbase/dk-navbar/dk-navbar"
+        "dk-navbar": "components/dkbase/dk-navbar/dk-navbar",
+        "dk-swiper": "components/dkbase/dk-swiper/dk-swiper"
     },
     "tabBar": {
         "color": "#95A8CB",

components/dkbase/dk-swiper/dk-swiper.js

@@ -0,0 +1,131 @@
+// pages/leftSwiperDel/index.js 
+Component({
+  properties: {
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    rightWidth: {
+      type: Number,
+      value: 0
+    },
+    rightButtontxt: {
+      type: String,
+      value: '删除'
+    }
+
+  },
+  data: {
+    delBtnWidth: 65,//删除按钮宽度单位（rpx） 
+
+    txtStyle: ''
+  },
+  methods: {
+ 
+    touchS(e) {
+      if (this.data.disabled) {
+        return
+      }
+      if (e.touches.length == 1) {
+        this.setData({
+          //设置触摸起始点水平方向位置 
+          startX: e.touches[0].clientX
+        });
+      }
+    },
+    touchM(e) {
+      var that = this
+      if (this.data.disabled) {
+        return
+      }
+      if (e.touches.length == 1) {
+        //手指移动时水平方向位置 
+        var moveX = e.touches[0].clientX;
+        //手指起始点位置与移动期间的差值 
+        var disX = this.data.startX - moveX;
+        var delBtnWidth = this.data.delBtnWidth;
+        var txtStyle = "";
+        if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变 
+          txtStyle = "left:0px";
+        } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离 
+          txtStyle = "left:-" + disX + "px";
+          if (disX >= delBtnWidth) {
+            //控制手指移动距离最大值为删除按钮的宽度 
+            txtStyle = "left:-" + delBtnWidth + "px";
+          }
+        }
+
+        //更新列表的状态 
+        this.setData({
+          txtStyle: txtStyle
+        });
+      }
+    },
+
+    touchE(e) {
+      if (this.data.disabled) {
+        return
+      }
+      if (e.changedTouches.length == 1) {
+        //手指移动结束后水平位置 
+        var endX = e.changedTouches[0].clientX;
+        //触摸开始与结束，手指移动的距离 
+        var disX = this.data.startX - endX;
+        var delBtnWidth = this.data.delBtnWidth;
+        //如果距离小于删除按钮的1/2，不显示删除按钮 
+        var txtStyle = disX > delBtnWidth / 4 ? "left:-" + delBtnWidth + "px" : "left:0px";
+        //获取手指触摸的是哪一项 
+        // var index = e.target.dataset.index; 
+        // var list = this.data.list; 
+        // list[index].txtStyle = txtStyle; 
+        //更新列表的状态 
+
+
+        this.setData({
+          txtStyle: txtStyle
+        });
+      }else{
+        this.close()
+      }
+    },
+    //获取元素自适应后的实际宽度 
+    getEleWidth(w) {
+      var real = 0;
+      try {
+        var res = wx.getSystemInfoSync().windowWidth;
+        var windowHeight = wx.getSystemInfoSync().windowHeight;
+        var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应 
+        real = Math.floor(res / scale);
+        return real;
+      } catch (e) {
+        return false;
+        // Do something when catch error 
+      }
+    },
+    initEleWidth() {
+      var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
+
+      this.setData({
+        delBtnWidth: delBtnWidth
+      });
+
+    },
+    close() {
+      this.setData({
+        //设置触摸起始点水平方向位置 
+        startX: 0
+      });
+    },
+
+    onClick(event) {
+      const { key: position = 'outside' } = event.currentTarget.dataset;
+      this.triggerEvent('click', {
+        position,
+        instance: this,
+        name: this.data.name
+      });
+    }
+  }
+
+})
+

components/dkbase/dk-swiper/dk-swiper.json

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

components/dkbase/dk-swiper/dk-swiper.wxml

@@ -0,0 +1,12 @@
+<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE">
+
+  <view class="item">
+    <view class="{{rightWidth == 0 ? 'slot-disabled': 'slot' }}" style="{{txtStyle}}">
+      <slot />
+    </view>
+
+    <view  data-key="right" catch:tap="onClick" wx:if="{{rightWidth}}" class="right">
+      {{rightButtontxt}}
+    </view>
+  </view>
+</view>

components/dkbase/dk-swiper/dk-swiper.wxss

@@ -0,0 +1,54 @@
+.item{ 
+  position: relative; 
+  height:100%;
+  /* margin: auto; */
+  overflow: hidden; 
+} 
+
+.right{ 
+  position: absolute; 
+  top:0;
+  background-color: #3E69F6; 
+  width: 65px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center; 
+  z-index: 1; 
+  right: 0; 
+  color: #fff 
+} 
+.right{ 
+  position: absolute; 
+  top:0;
+  background-color: #3E69F6; 
+  width: 65px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center; 
+  z-index: 1; 
+  right: 0; 
+  color: #fff 
+} 
+
+.slot{
+  position: relative; 
+  top:0;
+  z-index: 2; 
+  width: 100%; 
+  height: 100%;
+  background-color: #fff; 
+  transition: left 0.2s ease-in-out; 
+}
+.slot-disabled{
+  /* position: relative; 
+  top:0; */
+  z-index: 0; 
+  width: 100%; 
+  height: 100%;
+  background-color: #fff; 
+  /* transition: left 0.2s ease-in-out;  */
+}