@10yun/cv-mobile-ui 0.5.29 → 0.5.31

package/ui-fireui/fui-sticky/fui-sticky.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="fui-sticky-class">
+    <!--sticky 容器-->
+    <view :style="{ height: stickyHeight, backgroundColor: backgroundColor }" v-if="isFixed"></view>
+    <view :class="{ 'fui-sticky-fixed': isFixed }" :style="{ top: isFixed ? stickyTop + 'px' : 'auto' }">
+      <slot name="header"></slot>
+    </view>
+    <!--sticky 容器-->
+    <!--内容-->
+    <slot name="content"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiSticky',
+  props: {
+    scrollTop: {
+      type: Number
+    },
+    //吸顶时与顶部的距离，单位px
+    stickyTop: {
+      type: [Number, String],
+      // #ifndef H5
+      default: 0,
+      // #endif
+      // #ifdef H5
+      default: 44
+      // #endif
+    },
+    //是否指定容器，即内容放置插槽content内
+    container: {
+      type: Boolean,
+      default: false
+    },
+    //是否是原生自带header
+    isNativeHeader: {
+      type: Boolean,
+      default: true
+    },
+    //吸顶容器 高度 rpx
+    stickyHeight: {
+      type: String,
+      default: 'auto'
+    },
+    //占位容器背景颜色
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //是否重新计算[有异步加载时使用,设置大于0的数]
+    recalc: {
+      type: Number,
+      default: 0
+    },
+    //列表中的索引值
+    index: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  watch: {
+    scrollTop(newValue, oldValue) {
+      if (this.initialize != 0) {
+        this.updateScrollChange(() => {
+          this.updateStickyChange();
+          this.initialize = 0;
+        });
+      } else {
+        this.updateStickyChange();
+      }
+    },
+    recalc(newValue, oldValue) {
+      this.updateScrollChange(() => {
+        this.updateStickyChange();
+        this.initialize = 0;
+      });
+    }
+  },
+  created() {
+    this.initialize = this.recalc;
+  },
+  mounted() {
+    setTimeout(() => {
+      this.updateScrollChange();
+    }, 20);
+  },
+  data() {
+    return {
+      timer: null,
+      top: 0,
+      height: 0,
+      isFixed: false,
+      initialize: 0 //重新初始化
+    };
+  },
+  methods: {
+    updateStickyChange() {
+      const top = this.top;
+      const height = this.height;
+      const scrollTop = this.scrollTop;
+      let stickyTop = this.stickyTop;
+      // #ifdef H5
+      if (this.isNativeHeader) {
+        stickyTop = stickyTop - 44;
+        stickyTop = stickyTop < 0 ? 0 : stickyTop;
+      }
+      // #endif
+      if (this.container) {
+        this.isFixed = scrollTop + stickyTop >= top && scrollTop + stickyTop < top + height ? true : false;
+      } else {
+        this.isFixed = scrollTop + stickyTop >= top ? true : false;
+      }
+      //是否吸顶
+      this.$emit('sticky', {
+        isFixed: this.isFixed,
+        index: this.index
+      });
+    },
+    updateScrollChange(callback) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      this.timer = setTimeout(() => {
+        const className = '.fui-sticky-class';
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(className)
+          .boundingClientRect((res) => {
+            if (res) {
+              this.top = res.top + (this.scrollTop || 0);
+              this.height = res.height;
+              callback && callback();
+              this.$emit('change', {
+                index: Number(this.index),
+                top: this.top
+              });
+            }
+          })
+          .exec();
+      }, 0);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-sticky-fixed {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  z-index: 888;
+}
+</style>

package/ui-fireui/fui-sticky-wxs/fui-sticky-wxs.vue

@@ -0,0 +1,133 @@
+<template>
+  <view
+    class="fui-sticky-class"
+    :change:prop="parse.stickyChange"
+    :prop="scrollTop"
+    :data-top="top"
+    :data-height="height"
+    :data-stickytop="stickyTop"
+    :data-container="container"
+    :data-isNativeHeader="isNativeHeader"
+    :data-index="index"
+  >
+    <!--sticky 容器-->
+    <view class="fui-sticky-seat" :style="{ height: stickyHeight, backgroundColor: backgroundColor }"></view>
+    <view class="fui-sticky-bar">
+      <slot name="header"></slot>
+    </view>
+    <!--sticky 容器-->
+    <!--内容-->
+    <slot name="content"></slot>
+  </view>
+</template>
+<script src="./fui-sticky.wxs" module="parse" lang="wxs"></script>
+<script>
+export default {
+  name: 'fuiStickyWxs',
+  props: {
+    scrollTop: {
+      type: [Number, String],
+      value: 0
+    },
+    //吸顶时与顶部的距离，单位px
+    stickyTop: {
+      type: [Number, String],
+      // #ifndef H5
+      default: 0,
+      // #endif
+      // #ifdef H5
+      default: 44
+      // #endif
+    },
+    //是否指定容器，即内容放置插槽content内
+    container: {
+      type: Boolean,
+      default: false
+    },
+    //是否是原生自带header
+    isNativeHeader: {
+      type: Boolean,
+      default: true
+    },
+    //吸顶容器 高度 rpx
+    stickyHeight: {
+      type: String,
+      default: 'auto'
+    },
+    //占位容器背景颜色
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //是否重新计算[有异步加载时使用,设置大于0的数]
+    recalc: {
+      type: Number,
+      default: 0
+    },
+    //列表中的索引值
+    index: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  watch: {
+    recalc(newValue, oldValue) {
+      this.updateScrollChange(() => {
+        //更新prop scrollTop值(+0.1即可),触发change事件
+        this.$emit('prop', {});
+      });
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.updateScrollChange();
+    }, 20);
+  },
+  data() {
+    return {
+      timer: null,
+      top: 0,
+      height: 0
+    };
+  },
+  methods: {
+    updateScrollChange(callback) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      this.timer = setTimeout(() => {
+        const className = '.fui-sticky-class';
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(className)
+          .boundingClientRect((res) => {
+            if (res) {
+              this.top = res.top + (this.scrollTop || 0);
+              this.height = res.height;
+              callback && callback();
+              this.$emit('change', {
+                index: Number(this.index),
+                top: this.top
+              });
+            }
+          })
+          .exec();
+      }, 0);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-sticky-fixed {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  z-index: 998;
+}
+
+.fui-sticky-seat {
+  display: none;
+}
+</style>

package/ui-fireui/fui-sticky-wxs/fui-sticky.wxs

@@ -0,0 +1,44 @@
+var stickyChange = function (scrollTop, oldScrollTop, ownerInstance, ins) {
+  if(!oldScrollTop) return false;
+  var dataset = ins.getDataset()
+  var top =+dataset.top;
+  var height = + dataset.height;
+  var stickyTop = +dataset.stickytop;
+  var isNativeHeader=dataset.isnativeheader;
+  var isFixed = false;
+  var distance=stickyTop
+  // #ifdef H5
+  if (isNativeHeader) {
+  	distance = distance - 44
+  	distance = distance < 0 ? 0 : distance
+  }
+  // #endif
+  if (dataset.container) {
+    isFixed = (scrollTop + distance >= top && scrollTop + distance < top + height) ? true : false
+  } else {
+    isFixed = scrollTop + distance >= top ? true : false
+  }
+  if (isFixed) {
+    ownerInstance.selectComponent('.fui-sticky-bar').setStyle({
+      "top": stickyTop + 'px'
+    }).addClass('fui-sticky-fixed')
+    ownerInstance.selectComponent('.fui-sticky-seat').setStyle({
+      "display": 'block'
+    })
+  } else {
+    ownerInstance.selectComponent('.fui-sticky-bar').setStyle({
+      "top": 'auto'
+    }).removeClass('fui-sticky-fixed')
+    ownerInstance.selectComponent('.fui-sticky-seat').setStyle({
+      "display": 'none'
+    })
+  }
+  ownerInstance.triggerEvent("sticky", {
+    isFixed: isFixed,
+    index: parseInt(dataset.index)
+  })
+}
+
+export default {
+  stickyChange: stickyChange
+}

package/ui-fireui/fui-swipe-action/fui-swipe-action.vue

@@ -0,0 +1,301 @@
+<template>
+  <view class="fui-swipeout-wrap" :class="swipeoutClass">
+    <view
+      class="fui-swipeout-item"
+      :class="[isShowBtn ? 'swipe-action-show' : '']"
+      @touchstart="handlerTouchstart"
+      @touchmove="handlerTouchmove"
+      @touchend="handlerTouchend"
+      :style="{ transform: 'translate(' + position.pageX + 'px,0)' }"
+    >
+      <view class="fui-swipeout-content">
+        <slot name="content"></slot>
+      </view>
+      <view class="fui-swipeout-button-right-group" v-if="actions.length > 0" @touchend.stop="loop">
+        <view
+          class="fui-swipeout-button-right-item"
+          v-for="(item, index) in actions"
+          :key="index"
+          :style="{ backgroundColor: item.background || '#f7f7f7', color: item.color, width: item.width + 'px' }"
+          :data-index="index"
+          @tap="handlerButton"
+        >
+          <image :src="item.icon" v-if="item.icon" :style="{ width: px(item.imgWidth), height: px(item.imgHeight) }"></image>
+          <text :style="{ fontSize: px(item.fontsize) }">{{ item.name }}</text>
+        </view>
+      </view>
+      <!--actions长度设置为0，可直接传按钮进来-->
+      <view
+        class="fui-swipeout-button-right-group"
+        @touchend.stop="loop"
+        @tap="handlerParentButton"
+        v-if="actions.length === 0"
+        :style="{ width: operateWidth + 'px', right: '-' + operateWidth + 'px' }"
+      >
+        <slot name="button"></slot>
+      </view>
+    </view>
+    <view
+      v-if="isShowBtn && showMask"
+      class="swipe-action_mask"
+      @tap.stop="closeButtonGroup"
+      @touchstart.stop.prevent="closeButtonGroup"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiSwipeAction',
+  props: {
+    // name: '删除',
+    // color: '#fff',
+    // fontsize: 32,//单位rpx
+    // width: 80, //单位px
+    // icon: 'like.png',//此处为图片地址
+    // background: '#ed3f14'
+    actions: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    swipeoutClass: {
+      type: String,
+      default: ''
+    },
+    //点击按钮时是否自动关闭
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    //设为false，可以滑动多行不关闭菜单
+    showMask: {
+      type: Boolean,
+      default: true
+    },
+    operateWidth: {
+      type: Number,
+      default: 80
+    },
+    params: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    //禁止滑动
+    forbid: {
+      type: Boolean,
+      default: false
+    },
+    //手动开关
+    open: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    actions(newValue, oldValue) {
+      this.updateButtonSize();
+    },
+    open(newValue) {
+      this.manualSwitch(newValue);
+    }
+  },
+  data() {
+    return {
+      //start position
+      tStart: {
+        pageX: 0,
+        pageY: 0
+      },
+      //限制滑动距离
+      limitMove: 0,
+      //move position
+      position: {
+        pageX: 0,
+        pageY: 0
+      },
+      isShowBtn: false
+    };
+  },
+  mounted() {
+    this.updateButtonSize();
+  },
+  methods: {
+    swipeDirection(x1, x2, y1, y2) {
+      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
+    },
+    //阻止事件冒泡
+    loop() {},
+    updateButtonSize() {
+      const actions = this.actions;
+      if (actions.length > 0) {
+        const query = uni.createSelectorQuery().in(this);
+        let limitMovePosition = 0;
+        actions.forEach((item) => {
+          limitMovePosition += item.width || 0;
+        });
+        this.limitMove = limitMovePosition;
+      } else {
+        this.limitMove = this.operateWidth;
+      }
+    },
+    handlerTouchstart(event) {
+      if (this.forbid) return;
+      const touches = event.touches ? event.touches[0] : {};
+      const tStart = this.tStart;
+      if (touches) {
+        for (let i in tStart) {
+          if (touches[i]) {
+            tStart[i] = touches[i];
+          }
+        }
+      }
+    },
+    swipper(touches) {
+      const start = this.tStart;
+      const spacing = {
+        pageX: touches.pageX - start.pageX,
+        pageY: touches.pageY - start.pageY
+      };
+      if (this.limitMove < Math.abs(spacing.pageX)) {
+        spacing.pageX = -this.limitMove;
+      }
+      this.position = spacing;
+    },
+    handlerTouchmove(event) {
+      if (this.forbid) return;
+      const start = this.tStart;
+      const touches = event.touches ? event.touches[0] : {};
+      if (touches) {
+        const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+        if (direction === 'Left' && Math.abs(this.position.pageX) !== this.limitMove) {
+          this.swipper(touches);
+        }
+      }
+    },
+    handlerTouchend(event) {
+      if (this.forbid) return;
+      const start = this.tStart;
+      const touches = event.changedTouches ? event.changedTouches[0] : {};
+      if (touches) {
+        const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+        const spacing = {
+          pageX: touches.pageX - start.pageX,
+          pageY: touches.pageY - start.pageY
+        };
+        if (Math.abs(spacing.pageX) >= 40 && direction === 'Left') {
+          spacing.pageX = spacing.pageX < 0 ? -this.limitMove : this.limitMove;
+          this.isShowBtn = true;
+        } else {
+          spacing.pageX = 0;
+        }
+        this.position = spacing;
+      }
+    },
+    handlerButton(event) {
+      if (this.closable) {
+        this.closeButtonGroup();
+      }
+      const dataset = event.currentTarget.dataset;
+      this.$emit('click', {
+        index: Number(dataset.index),
+        item: this.params
+      });
+    },
+    closeButtonGroup() {
+      this.position = {
+        pageX: 0,
+        pageY: 0
+      };
+      this.isShowBtn = false;
+    },
+    //控制自定义按钮菜单
+    handlerParentButton(event) {
+      if (this.closable) {
+        this.closeButtonGroup();
+      }
+    },
+    manualSwitch(isOpen) {
+      let x = 0;
+      if (isOpen) {
+        if (this.actions.length === 0) {
+          x = this.operateWidth;
+        } else {
+          let width = 0;
+          this.actions.forEach((item) => {
+            width += item.width;
+          });
+          x = width;
+        }
+      }
+      this.position = {
+        pageX: -x,
+        pageY: 0
+      };
+    },
+    px(num) {
+      return uni.upx2px(num) + 'px';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-swipeout-wrap {
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.swipe-action-show {
+  position: relative;
+  z-index: 998;
+}
+
+.fui-swipeout-item {
+  width: 100%;
+  /* padding: 15px 20px; */
+  box-sizing: border-box;
+  transition: transform 0.2s ease;
+  font-size: 14px;
+}
+
+.fui-swipeout-content {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.fui-swipeout-button-right-group {
+  position: absolute;
+  right: -100%;
+  top: 0;
+  height: 100%;
+  z-index: 1;
+  width: 100%;
+}
+
+.fui-swipeout-button-right-item {
+  height: 100%;
+  float: left;
+  white-space: nowrap;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.swipe-action_mask {
+  display: block;
+  opacity: 0;
+  position: fixed;
+  z-index: 997;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>