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}}" />