From 2de8f1afcc28861b5850994dc7caa298f813ead6 Mon Sep 17 00:00:00 2001
From: xpz2018 <107107461@qq.com>
Date: Wed, 13 Oct 2021 19:22:36 +0800
Subject: [PATCH] no message
---
components/refresh-view/index.js | 92 +++++++++++++++++++++
components/refresh-view/index.json | 4 +
components/refresh-view/index.wxml | 21 +++++
components/refresh-view/index.wxss | 78 ++++++++++++++++++
components/refresh-view/scroll.wxs | 124 +++++++++++++++++++++++++++++
pages/agent/fragment/index.wxml | 2 +-
pages/agent/order/index.js | 3 +
pages/agent/order/index.json | 2 +-
pages/agent/order/index.wxml | 3 +-
9 files changed, 326 insertions(+), 3 deletions(-)
create mode 100644 components/refresh-view/index.js
create mode 100644 components/refresh-view/index.json
create mode 100644 components/refresh-view/index.wxml
create mode 100644 components/refresh-view/index.wxss
create mode 100644 components/refresh-view/scroll.wxs
diff --git a/components/refresh-view/index.js b/components/refresh-view/index.js
new file mode 100644
index 0000000..66bf919
--- /dev/null
+++ 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;
+ }
+ }
+})
\ No newline at end of file
diff --git a/components/refresh-view/index.json b/components/refresh-view/index.json
new file mode 100644
index 0000000..e8cfaaf
--- /dev/null
+++ b/components/refresh-view/index.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
\ No newline at end of file
diff --git a/components/refresh-view/index.wxml b/components/refresh-view/index.wxml
new file mode 100644
index 0000000..eaab87e
--- /dev/null
+++ b/components/refresh-view/index.wxml
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/refresh-view/index.wxss b/components/refresh-view/index.wxss
new file mode 100644
index 0000000..21617e0
--- /dev/null
+++ 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);
+ }
+}
diff --git a/components/refresh-view/scroll.wxs b/components/refresh-view/scroll.wxs
new file mode 100644
index 0000000..83e1237
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/pages/agent/fragment/index.wxml b/pages/agent/fragment/index.wxml
index c89fdb4..4054702 100644
--- a/pages/agent/fragment/index.wxml
+++ b/pages/agent/fragment/index.wxml
@@ -21,7 +21,7 @@
-
+
diff --git a/pages/agent/order/index.js b/pages/agent/order/index.js
index 2de5bb3..e7f781c 100644
--- 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 }) {
diff --git a/pages/agent/order/index.json b/pages/agent/order/index.json
index 122d518..83de2ad 100644
--- 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",
diff --git a/pages/agent/order/index.wxml b/pages/agent/order/index.wxml
index 9c60e68..9a27871 100644
--- a/pages/agent/order/index.wxml
+++ b/pages/agent/order/index.wxml
@@ -11,7 +11,8 @@
-
+
+