增加补充相关资料和小程序源码

微信小程序源码/iot-home/components/firstui/fui-swipe-action/fui-swipe-action.js

@@ -0,0 +1,163 @@
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true
+  },
+  properties: {
+    buttons: {
+      type: Array,
+      value: [{
+        text: '删除',
+        background: '#FF2B2B'
+      }]
+    },
+    size: {
+      type: Number,
+      optionalTypes: [String],
+      value: 32
+    },
+    color: {
+      type: String,
+      value: '#fff'
+    },
+    show: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        this.setData({
+          isShow: val ? 'right' : 'none'
+        })
+      }
+    },
+    threshold: {
+      type: Number,
+      optionalTypes: [String],
+      value: 30,
+      observer(val) {
+        this.setData({
+          thresholdVal: Number(val)
+        })
+      }
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        this.setData({
+          isDisabled: val
+        })
+      }
+    },
+    autoClose: {
+      type: Boolean,
+      value: true
+    },
+    //v2.1.0+ 点击当前菜单是否立即关闭菜单
+    clickClose: {
+      type: Boolean,
+      value: true
+    },
+    //自定义按钮
+    custom: {
+      type: Boolean,
+      value: false
+    },
+    //1.9.9+
+    marginTop: {
+      type: String,
+      optionalTypes: [Number],
+      value: 0
+    },
+    //1.9.9+
+    marginBottom: {
+      type: String,
+      optionalTypes: [Number],
+      value: 0
+    },
+    param: {
+      type: Number,
+      optionalTypes: [String],
+      value: 0
+    }
+  },
+  relations: {
+    '../fui-swipeaction-group/fui-swipeaction-group': {
+      type: 'ancestor',
+      linked: function (target) {
+        this.data.group = target
+      }
+    }
+  },
+  data: {
+    group: null,
+    isShow: false,
+    isDisabled: false,
+    thresholdVal: 30,
+    clientX: 0,
+    timestamp: 0
+  },
+  lifetimes: {
+    ready: function () {
+      this.setData({
+        isShow: this.data.show ? 'right' : 'none',
+        isDisabled: this.data.disabled,
+        thresholdVal: Number(this.data.threshold)
+      })
+    }
+  },
+  lifetimes: {
+    detached: function () {
+      this.unInstall()
+    }
+  },
+  methods: {
+    unInstall() {
+      const group = this.data.group
+      if (group) {
+        group.data.children.forEach((item, index) => {
+          if (item === this) {
+            group.data.children.splice(index, 1)
+          }
+        })
+      }
+    },
+    closeSwipe(e) {
+      if (!this.data.autoClose) return
+      this.data.group && this.data.group.closeAuto(this)
+    },
+    change(e) {
+      this.triggerEvent('change', {
+        isOpen: e.open === 'right',
+        param: this.data.param
+      })
+      if (this.data.isShow !== e.open) {
+        this.setData({
+          isShow: e.open
+        })
+      }
+    },
+    appTouchStart(e) {
+      const {
+        clientX
+      } = e.changedTouches[0]
+      this.data.clientX = clientX
+      this.data.timestamp = new Date().getTime()
+    },
+    appTouchEnd(e) {
+      let index = Number(e.currentTarget.dataset.index)
+      let item = e.currentTarget.dataset.item
+      const {
+        clientX
+      } = e.changedTouches[0]
+      let diff = Math.abs(this.data.clientX - clientX)
+      let time = (new Date().getTime()) - this.data.timestamp
+      if (diff < 40 && time < 300) {
+        this.triggerEvent('click', {
+          index,
+          item,
+          param: this.data.param
+        })
+      }
+    }
+  }
+})

微信小程序源码/iot-home/components/firstui/fui-swipe-action/fui-swipe-action.json

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

微信小程序源码/iot-home/components/firstui/fui-swipe-action/fui-swipe-action.wxml

@@ -0,0 +1,16 @@
+<wxs src="./index.wxs" module="handler"></wxs>
+<view class="fui-swipe__action-wrap" style="margin-top: {{marginTop}}rpx;margin-bottom: {{marginBottom}}rpx;">
+  <view class="fui-swipe__action-inner" show="{{isShow}}" change:show="{{handler.showChange}}" threshold="{{thresholdVal}}" change:threshold="{{handler.thresholdChange}}" clickclose="{{clickClose}}" change:clickclose="{{handler.clickCloseChange}}" disabled="{{isDisabled}}" change:disabled="{{handler.disabledChange}}" bindtouchstart="{{handler.touchstart}}" bindtouchmove="{{handler.touchmove}}" bindtouchend="{{handler.touchend}}">
+    <view class="fui-swipe__action-left">
+      <slot></slot>
+    </view>
+    <view class="fui-swipe__action-right" wx:if="{{!custom}}">
+      <view class="fui-swipe__action-btn" style="background:{{item.background}}" wx:for="{{buttons}}" wx:key="index" bindtouchstart="appTouchStart" bindtouchend="appTouchEnd" data-index="{{index}}" data-item="{{item}}">
+        <text class="fui-swipe__action-text" style="font-size:{{(item.size || size)}}rpx;color:{{item.color || color}}">{{item.text}}</text>
+      </view>
+    </view>
+    <view class="fui-swipe__action-right" wx:else>
+      <slot name="buttons"></slot>
+    </view>
+  </view>
+</view>

微信小程序源码/iot-home/components/firstui/fui-swipe-action/fui-swipe-action.wxss

@@ -0,0 +1,46 @@
+.fui-swipe__action-wrap {
+  position: relative;
+  overflow: hidden;
+}
+
+.fui-swipe__action-inner {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.fui-swipe__action-left {
+  width: 100%;
+  position: relative;
+  z-index: 10;
+  flex: 1;
+}
+
+.fui-swipe__action-right {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.fui-swipe__action-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0 48rpx;
+}
+
+.fui-swipe__action-text {
+  flex-shrink: 0;
+}
+
+.fui-swipe__action-ani {
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+}

微信小程序源码/iot-home/components/firstui/fui-swipe-action/index.wxs

@@ -0,0 +1,193 @@
+var MIN_DISTANCE = 10
+
+function getDom(ins, ownerInstance) {
+	var state = ins.getState()
+  var rightDom = ownerInstance.selectComponent('.fui-swipe__action-right')
+  if(rightDom){
+    var rightStyles = rightDom.getBoundingClientRect()
+    state.rightWidth = rightStyles.width || 0
+  }else{
+    state.rightWidth = 0
+  }
+}
+
+function getDirection(x, y) {
+	if (x > y && x > MIN_DISTANCE) {
+		return 'horizontal';
+	}
+	if (y > x && y > MIN_DISTANCE) {
+		return 'vertical';
+	}
+	return '';
+}
+
+function stopTouchMove(event) {
+	var instance = event.instance;
+	var state = instance.getState();
+	var touch = event.touches[0];
+	state.deltaX = touch.clientX - state.startX;
+	state.deltaY = touch.clientY - state.startY;
+	state.offsetY = Math.abs(state.deltaY);
+	state.offsetX = Math.abs(state.deltaX);
+	state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+}
+
+function stopTouchStart(event) {
+	var instance = event.instance;
+	var state = instance.getState();
+	resetTouchStatus(instance);
+	var touch = event.touches[0];
+	state.startX = touch.clientX;
+	state.startY = touch.clientY;
+}
+
+function touchstart(e, ownerInstance) {
+	var ins = e.instance;
+	var state = ins.getState();
+	getDom(ins, ownerInstance)
+	if (state.disabled) return
+	// 开始触摸时移除动画类
+	ins.requestAnimationFrame(function () {
+		ins.removeClass('fui-swipe__action-ani');
+		ownerInstance.callMethod('closeSwipe');
+	})
+
+	// 记录上次的位置
+	state.x = state.left || 0
+	// 计算滑动开始位置
+	stopTouchStart(e, ownerInstance)
+}
+
+function move(value, ins, ownerInstance) {
+	value = value || 0
+	var state = ins.getState()
+	var rightWidth = state.rightWidth
+	// 获取可滑动范围
+	state.left = Math.min(Math.max(value, -rightWidth), 0);
+	ins.requestAnimationFrame(function () {
+		ins.setStyle({
+			transform: 'translateX(' + state.left + 'px)',
+			'-webkit-transform': 'translateX(' + state.left + 'px)'
+		})
+	})
+}
+
+function touchmove(e, ownerInstance) {
+	var ins = e.instance;
+	var state = ins.getState()
+	if (state.disabled) return;
+	// 是否可以滑动页面
+	stopTouchMove(e);
+	if (state.direction !== 'horizontal') return;
+
+	if (e.preventDefault) {
+		// 阻止页面滚动
+		e.preventDefault()
+	}
+
+	move(state.x + state.deltaX, ins, ownerInstance)
+}
+
+function openState(type, ins, ownerInstance) {
+	var state = ins.getState()
+	var leftWidth = state.leftWidth
+	var rightWidth = state.rightWidth
+	var left = ''
+	state.open = state.open ? state.open : 'none'
+	if (type === 'right' || type === true) {
+		left = -rightWidth
+	} else {
+		left = 0
+	}
+	if (state.open !== type) {
+		state.throttle = true
+		ownerInstance.callMethod('change', {
+			open: type
+		})
+	}
+
+	state.open = type
+	// 添加动画类
+	ins.requestAnimationFrame(function () {
+		ins.addClass('fui-swipe__action-ani');
+		move(left, ins, ownerInstance)
+	})
+}
+
+function moveDirection(left, ins, ownerInstance) {
+	var state = ins.getState()
+	var threshold = state.threshold || 30
+	var position = state.position
+	var open = state.open || 'none'
+	var rightWidth = state.rightWidth
+	if (state.deltaX === 0 && state.clickclose) {
+		openState('none', ins, ownerInstance)
+		return
+	}
+	if ((open === 'none' && rightWidth > 0 && -left > threshold) || (open !== 'none' && rightWidth > 0 &&
+			rightWidth +
+			left < threshold)) {
+		openState('right', ins, ownerInstance)
+	} else {
+		// default
+		openState('none', ins, ownerInstance)
+	}
+}
+
+function touchend(e, ownerInstance) {
+	var instance = e.instance;
+	var state = instance.getState()
+	if (state.disabled) return
+	moveDirection(state.left, instance, ownerInstance)
+}
+
+function resetTouchStatus(instance) {
+	var state = instance.getState();
+	state.direction = '';
+	state.deltaX = 0;
+	state.deltaY = 0;
+	state.offsetX = 0;
+	state.offsetY = 0;
+}
+
+function showChange(newVal, oldVal, ownerInstance, instance) {
+	var state = instance.getState()
+	getDom(instance, ownerInstance)
+	if (newVal && newVal !== 'none') {
+		openState(newVal || 'right', instance, ownerInstance)
+		return
+	}
+
+	if (state.left) {
+		openState('none', instance, ownerInstance)
+	}
+	resetTouchStatus(instance)
+}
+
+function disabledChange(newVal, oldVal, ownerInstance, ins) {
+	var st = ins.getState()
+	st.disabled = newVal
+}
+
+function thresholdChange(newVal, oldVal, ownerInstance, ins) {
+	var st = ins.getState()
+	st.threshold = newVal || 30
+}
+function clickCloseChange(newVal, oldVal, ownerInstance, ins) {
+	var st = ins.getState()
+	if (newVal || newVal === null || newVal === undefined) {
+		st.clickclose = true
+	} else {
+		st.clickclose = false
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	disabledChange: disabledChange,
+	thresholdChange: thresholdChange,
+	showChange: showChange,
+	clickCloseChange:clickCloseChange
+}