no message

4 years ago · 2de8f1afcc
9 changed files with 326 additions and 3 deletions
--- a/components/refresh-view/index.js
+++ b/components/refresh-view/index.js
@ -0,0 +1,92 @@
+// components/swiperefreshlayout/swiperefreshlayout.js
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true
+  },
+  properties: {
+    height: {
+      type: Number,
+      value: 800
+    },
+    threshold: { // 下拉刷新阈值，下拉距离超过该值触发刷新
+      type: Number,
+      value: 30
+    },
+    color: { // 下拉刷新进度条颜色
+      type: String,
+      value: 'black'
+    },
+    backgroundColor: { // 下拉刷新圆圈背景颜色
+      type: String,
+      value: 'white'
+    },
+    loadMoreEnable: { // 是否开启上拉加载
+      type: Boolean,
+      value: true
+    },
+    refreshing: {
+      type: Boolean,
+      value: false,
+      observer(value) {
+        this.setRefresh(false)
+      }
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    progressBarHeight: '', // 下拉刷新圆圈高度
+    rotate: '',
+    scrollTop: true, // 当前是否处于顶部
+    triggered: false // 当前下拉刷新状态，true表示下拉刷新已经被触发，false表示下拉刷新未被触发
+  },
+
+  lifetimes: {
+    attached: function() {
+      // 在组件实例进入页面节点树时执行
+      this.setData({ progressBarHeight: this.rpx2px(80) });
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _scroll: function(e) {
+      // console.log(e);
+      if (e.detail.scrollTop <= 50) {
+        // 滚动到顶部
+        this.setData({ scrollTop: true });
+      } else {
+        this.setData({ scrollTop: false });
+      }
+    },
+    /**
+     * 滚动到底部
+     */
+    _scrollToLower: function(e) {
+      if (this.properties.loadMoreEnable) {
+        this.triggerEvent('loadmore');
+      }
+    },
+    /**
+     * 设置刷新状态
+     */
+    setRefresh: function(refreshing) {
+      if (this.data.triggered != refreshing) {
+        if (refreshing) {
+          // 触发刷新
+          this.triggerEvent('refresh');
+        }
+        this.setData({ triggered: refreshing });
+      }
+    },
+    /**
+     * rpx转px
+     */
+    rpx2px: function(rpx) {
+      return rpx / 750 * wx.getSystemInfoSync().windowWidth;
+    }
+  }
+})
--- a/components/refresh-view/index.json
+++ b/components/refresh-view/index.json
@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/components/refresh-view/index.wxml
+++ b/components/refresh-view/index.wxml
@ -0,0 +1,21 @@
+<!--components/swiperefreshlayout/swiperefreshlayout.wxml-->
+<wxs src="./scroll.wxs" module="scroll"></wxs>
+<scroll-view class="scroll-container" scroll-y bindscroll="_scroll" bindscrolltolower="_scrollToLower"
+  bindtouchstart="{{scroll.touchStart}}" catchtouchmove="{{scroll.touchMove}}" bindtouchend="{{scroll.touchEnd}}"
+  bindtouchcancel="{{scroll.touchCancel}}" data-scrolltop="{{scrollTop}}" data-threshold="{{threshold}}"
+  data-progressbarheight="{{progressBarHeight}}" change:prop="{{scroll.refreshStateChange}}" prop="{{triggered}}"
+  style="height:{{height}}rpx" lower-threshold="80">
+  <view class="view-container">
+    <!-- 下拉刷新圆圈 -->
+    <view class="circle-progress-bar" style="background-color:{{backgroundColor}};">
+      <text class="iconfont icon-shuaxin" style="font-size:50rpx;color:{{color}};" />
+    </view>
+    <!-- 刷新中圆圈 -->
+    <view class="circle-progress-bar" style="background-color:{{backgroundColor}};margin-top:40rpx;" hidden="{{!triggered}}">
+      <view class="loading" style="border-top:5rpx solid {{color}};border-left:5rpx solid {{color}};border-right:5rpx solid {{color}};" />
+    </view>
+    <!-- 刷新内容 -->
+    <view style="height:10rpx"></view>
+    <slot></slot>
+  </view>
+</scroll-view>
--- a/components/refresh-view/index.wxss
+++ b/components/refresh-view/index.wxss
@ -0,0 +1,78 @@
+/* components/swiperefreshlayout/swiperefreshlayout.wxss */
+
+.scroll-container {
+  width: 100%;
+  height: 100%;
+}
+
+.view-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.view-refresh-content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 8;
+}
+
+.circle-progress-bar {
+  width: 80rpx;
+  height: 80rpx;
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  box-shadow: 0 0 18rpx #ccc;
+  /* position: fixed; */
+  /* 这里margin-top没有取80rpx是为了防止露出阴影部分 */
+  margin-top: -90rpx;
+  z-index: 12;
+}
+
+@font-face {
+  font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1677220_3np58ejrjzs.eot?t=1585209535266'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1677220_3np58ejrjzs.eot?t=1585209535266#iefix') format('embedded-opentype'),
+         /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABmgAAAJwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApwgRABNgIkAwgLBgAEIAWEbQcxG7cFyA4lQRHBTO0GAEwE4Ro5m+QJQLJiXUBZV1VXWUtoNEpSbBSTrL6f9nMP9VCOPrGEelL58u6L7nazhknCu3noy9AmCRoNfOLe8f/VeRfIfEC5rLlo0aQuoC4OpADHWhRZkUTeMHaBSzhOoNEoj6L9oYlpqFRY4wJxRlMEqMyFFIVl64XamqVF3FamPl1Jn8Ct8PvxRygqSWoyq+TQ6UEZer5n7BF5o9qwnLdszOcAW0XGMlCIY7WpA0oEY5RoTJWaBPsqDL5nqsq3iL0aBfvrrPxmMAxF9yR2JbeaTXBbXU0Cm6NuIybPZbPH8vkThcJJ2Oi5OO6bu9rsnb08B3X0XO54aeRkIx0/eXIt2Xxf4E3de/DwfINUHpwobf17ua+xD0zrPV9Gb6oLH/Jdfv78+Q6QZ8iHv6MHoPqXz/KWIgSvZv9+TzV0/K9vKuD19ebTMFD9K9DPA+r37Q7+kbhnQ9GlljkVVVzbmkyeu6xRIyrY1+lnrK7nhnKhXs8IT52RFFm9aaLQllGjyQpq1dtCoyXDq5t0YUpEacCiXYDQ7gNJq6fI2n0RhfaNGr3+Uas9StDoRLRs2WQ2tOp+hgJHmYhpokmOTR0rr44KJ1GJmwLLSkPmLLKYFiVBX6CYHUYb2RwzYgklxDkllDkWGQKnoWk6xGWOjhL3qZy7bX4/rXuTT3IsqLaHQQIOyQhRGqGROGzUb89Vlz4/CSniTALWUlfjnYWYGK13Isgn0IMYVtm96u7llZgERQjHUQTFOCzEEBiETCYH4dYP0iEJ56OOSLja+O1mtK/Kt77G+rod0MjSp7D7ZnVn1biQ0mwAAA==') format('woff2'),
+         url('//at.alicdn.com/t/font_1677220_3np58ejrjzs.woff?t=1585209535266') format('woff'),
+         url('//at.alicdn.com/t/font_1677220_3np58ejrjzs.ttf?t=1585209535266') format('truetype'),
+         /* chrome,
+         firefox,
+         opera,
+         Safari,
+         Android,
+         iOS 4.2+ */ url('//at.alicdn.com/t/font_1677220_3np58ejrjzs.svg?t=1585209535266#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shuaxin:before {
+  content: "\e6c2";
+}
+
+.loading {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  border-bottom: 5rpx solid transparent;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/components/refresh-view/scroll.wxs
+++ b/components/refresh-view/scroll.wxs
@ -0,0 +1,124 @@
+/**
+ * 下拉刷新的控制
+ */
+var startmark = 0; // 开始触摸屏幕的位置
+var newmark = 0; // 当前移动到的位置
+var maxDistance = 75; // 下拉最大距离（单位px）
+var triggered = false; // 当前下拉刷新状态，true表示下拉刷新已经被触发，false表示下拉刷新未被触发
+
+/**
+ * 手指触摸动作开始
+ */
+var touchStart = function(e, instance) {
+  var scrollTop = e.instance.getDataset().scrolltop;
+  // 当前处于顶部并且没有处于刷新状态
+  if (scrollTop && !triggered) {
+    startmark = e.touches[0].pageY;
+  } else {
+    return;
+  }
+}
+
+/**
+ * 手指触摸后移动
+ */
+var touchMove = function(e, instance) {
+  var scrollTop = e.instance.getDataset().scrolltop;
+  var circleProgressBarHeight = e.instance.getDataset().progressbarheight;
+  // 当前处于顶部并且没有处于刷新状态
+  if (scrollTop && !triggered) {
+    newmark = e.touches[0].pageY;
+    if (newmark < startmark) {
+      // 向上滑动
+      instance.selectComponent('.circle-progress-bar').setStyle({ 'transform': 'none' })
+      instance.selectComponent('.icon-shuaxin').setStyle({ 'transform': 'none', 'opacity': 0 })
+    } else if (newmark - startmark > maxDistance + circleProgressBarHeight) {
+      // 达到最大滑动距离
+      instance.selectComponent('.circle-progress-bar').setStyle({
+        'transform': 'translateY(' + (maxDistance + circleProgressBarHeight) + 'px)'
+      });
+      instance.selectComponent('.icon-shuaxin').setStyle({
+        'transform': 'rotate(270deg)',
+        'opacity': 1
+      });
+    } else {
+      // 向下滑动，未到达最大滑动距离
+      instance.selectComponent('.circle-progress-bar').setStyle({
+        'transform': 'translateY(' + (newmark - startmark) + 'px)'
+      });
+      // 计算加载进度条的透明度，当滑动距离为最大滑动距离的一半时opacity为1
+      var opacity = 0;
+      if (newmark - startmark <= (maxDistance + circleProgressBarHeight) / 2) {
+        opacity = 1 * (newmark - startmark) / (maxDistance + circleProgressBarHeight);
+      } else {
+        opacity = 1;
+      }
+      instance.selectComponent('.icon-shuaxin').setStyle({
+        'transform': 'rotate(' + 270 * (newmark - startmark) / (maxDistance + circleProgressBarHeight) + 'deg)',
+        'opacity': opacity
+      });
+    }
+  } else {
+    return
+  }
+}
+
+/**
+ * 手指触摸动作结束
+ */
+var touchEnd = function(e, instance) {
+  var scrollTop = e.instance.getDataset().scrolltop;
+  var threshold = e.instance.getDataset().threshold;
+  // 当前处于顶部并且没有处于刷新状态
+  if (scrollTop && !triggered) {
+    if (newmark - startmark < (threshold + 40)) {
+      // 滑动距离未达到阈值（这里的40为加载圈高度），回到原位
+      startmark = 0;
+      newmark = 0;
+      instance.selectComponent('.circle-progress-bar').setStyle({
+        'transform': 'none',
+        'opacity': 0,
+        'transition-duration': '0.6s'
+      });
+    } else {
+      // 滑动距离达到阈值，触发刷新
+      startmark = 0;
+      newmark = 0;
+      instance.selectComponent('.circle-progress-bar').setStyle({
+        'transform': 'none',
+        'opacity': 0
+      });
+      instance.callMethod('setRefresh', true);
+    }
+  } else {
+    return;
+  }
+}
+
+/**
+ * 手指触摸动作被打断，如来电提醒，弹窗
+ */
+var touchCancel = function(e, instance) {
+  // 回到原位
+  startmark = 0;
+  newmark = 0;
+  instance.selectComponent('.circle-progress-bar').setStyle({
+    'transform': 'none',
+    'opacity': 0
+  });
+}
+
+/**
+ * 刷新状态变化监听
+ */
+var refreshStateChange = function(newValue, oldValue, ownerInstance, ins) {
+  triggered = newValue;
+}
+
+module.exports = {
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  touchCancel: touchCancel,
+  refreshStateChange: refreshStateChange
+}
--- a/pages/agent/fragment/index.wxml
+++ b/pages/agent/fragment/index.wxml
@ -21,7 +21,7 @@
 		<wux-skeleton-paragraph rounded rows="1" wux-class="case3-class" />
 	</view>
 </wux-skeleton>
-
+<!-- <refresh-view id="refreshview" bind:refresh="onRefreshList" height="{{height - 90 - customHeight}}" bind:loadmore="fetchPapersList"> -->
 <refresh-view bind:refresh="onRefreshList" height="{{height - 90 - customHeight}}" triggered="{{requesting}}" scrollTop="{{top}}" bind:scrolltolower="fetchPapersList">
 	<wux-skeleton active wx:if="{{loading}}">
 		<view class="flex bg-white" style="height:{{height - 90 - customHeight}}rpx;padding:32rpx">
--- a/pages/agent/order/index.js
+++ b/pages/agent/order/index.js
@ -106,6 +106,9 @@ Page({
    }).catch(err => {
      this.setData({ requesting: false, loading: false })
      util.showToast(err)
+    }).then(() => {
+      this.refreshview = this.refreshview || this.selectComponent('#refreshview')
+      this.refreshview.setRefresh(false)
    })
  },
  onTabChange: function ({ detail }) {
--- a/pages/agent/order/index.json
+++ b/pages/agent/order/index.json
@ -1,6 +1,6 @@
 {
  "usingComponents": {
-    "refresh-view": "/components/refresher/index",
+    "refresh-view": "/components/refresh-view/index",
    "wux-tabi": "/components/tabi/index",
    "wux-image": "/components/image/index",
    "order-item": "/pages/agent/order-item/index",
--- a/pages/agent/order/index.wxml
+++ b/pages/agent/order/index.wxml
@ -11,7 +11,8 @@
 	<wux-tabi scroll="{{true}}" tab-data="{{tabList}}" disable="{{requesting}}" tab-index="{{tabIndex}}" bind:change="onTabChange"></wux-tabi>
 </view>

-<refresh-view bind:refresh="onRefreshList" height="{{height}}" triggered="{{requesting}}" scrollTop="{{top}}" bind:scrolltolower="fetchOrderList">
+<refresh-view id="refreshview" bind:refresh="onRefreshList" height="{{height}}" bind:loadmore="fetchOrderList">
+<!-- <refresh-view bind:refresh="onRefreshList" height="{{height}}" triggered="{{requesting}}" scrollTop="{{top}}" bind:scrolltolower="fetchOrderList"> -->
 	<view wx:if="{{!orderList.length}}">
 		<view class="list-empty" style="height:{{height}}rpx">
 			<view class="load-spinner text-gray" style="margin-bottom:24px" wx:if="{{loading}}" />