组件细节修改 v3.0.4

1.修改item组件增加水波效果 2.修改下拉refresh触发时机 3.新增refresh下拉状态属性refreshstate 4.新增refresh下拉设置isAutoTriggered，判断是否自动回弹 5.修改组件内callback为promise
wzs28150 · Dec 12, 2021 · 7052361 · 7052361
1 parent 0301f42
commit 7052361
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 149 deletions.
diff --git a/item/index.js b/item/index.js
@@ -3,9 +3,28 @@ Component({
     "../scroller/index": {
       type: "parent",
       linked() {},
-    }
+    },
+  },
+  properties: {
+    ripple: false,
+  },
+  data: {
+    rippleStyle: "",
+  },
+  methods: {
+    itemTap(e) {
+      if (this.data.ripple) {
+        var x = e.changedTouches[0].pageX;
+        var y = e.currentTarget.offsetTop;
+        this.setData({
+          rippleStyle: "left:" + x + "px;animation: ripple 0.5s linear;",
+        });
+        setTimeout((res) => {
+          this.setData({
+            rippleStyle: "",
+          });
+        }, 500);
+      }
+    },
   },
-  properties: {},
-  data: {},
-  methods: {},
 });
diff --git a/item/index.wxml b/item/index.wxml
@@ -1,3 +1,4 @@
-<view class="wx-coolui-scroller-item">
+<view class="wx-coolui-scroller-item"  bind:touchstart="itemTap">
   <slot></slot>
+  <view class="ripple" style="{{rippleStyle}}"></view>
 </view>
diff --git a/item/index.wxss b/item/index.wxss
@@ -3,4 +3,23 @@
 }
 .wx-coolui-scroller-item {
   height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple {
+  background-color: rgba(0,0,0, 0.2);
+  border-radius: 100%;
+  height:10px;
+  width:10px;
+  position: absolute;
+  transform: scale(0);
+  top: 50%;
+}
+@keyframes ripple {
+  100% {
+  transform: scale(80);
+  transform: scale(80);
+  background-color: transparent;
+  }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coolui-scroller",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "微信小程序Scroll 上拉加载下拉刷新组件 ",
   "main": "./index.js",
   "scripts": {

diff --git a/refresh/index.js b/refresh/index.js
@@ -3,12 +3,11 @@ Component({
     multipleSlots: true,
     addGlobalClass: true,
   },
-  externalClasses: ['refresh-class'],
+  externalClasses: ["refresh-class"],
   relations: {
     "../scroller/index": {
       type: "parent",
-      linked(target) {
-      },
+      linked(target) {},
     },
     "../parallax/index": {
       type: "child",
@@ -24,50 +23,75 @@ Component({
     },
     threshold: {
       type: Number,
-      value: 0
+      value: 0,
+    },
+    isloading: {
+      type: Boolean,
+      value: false,
+    },
+    refreshstate: {
+      type: String,
+      value: "pulldown", // pulldown loosen loading
     },
     config: {
       type: Object,
       value: {
         shake: false,
         height: 50,
+        isAutoTriggered: true,
         text: {
           color: "#000000", // 文字颜色
           shadow: 0, // 是否开启shadow阴影,0为不开启,数值越大阴影范围越大
-        }
-      }
-    }
+        },
+      },
+    },
   },
   data: {
-    // height: 100
-    triggered: true,
+    triggered: false,
     scrollOption: {},
   },
   ready() {
-    this.parallaxNodes = this.getRelationNodes(
-      "../parallax/index"
-    );
+    this.parallaxNodes = this.getRelationNodes("../parallax/index");
   },
   methods: {
-    changeThreshold({ threshold }, callback) {
-      let that = this;
-      that.setData(
-        {
-          threshold: threshold,
-        },
-        () => {
-          if (callback) {
-            callback();
+    changeThreshold({ threshold }) {
+      const that = this;
+      return new Promise((resolve) => {
+        let refreshstate = "pulldown";
+        if (that.data.triggered && !that.data.isloading) {
+          refreshstate = "loosen";
+        }
+        that.setData(
+          {
+            threshold: threshold,
+            refreshstate: refreshstate,
+          },
+          () => {
+            resolve();
+            if (that.parallaxNodes.length > 0) {
+              that.parallaxNodes.forEach((elem, index) => {
+                elem.setData({
+                  threshold: threshold,
+                });
+              });
+            }
           }
-          if (that.parallaxNodes.length > 0) {
-            that.parallaxNodes.forEach((elem, index) => {
-              elem.setData({
-                threshold: threshold
-              })
-            });
+        );
+      });
+    },
+    setLoading({ isloading }) {
+      const that = this;
+      return new Promise((resolve) => {
+        that.setData(
+          {
+            isloading: isloading,
+            refreshstate: isloading ? "loading" : "pulldown",
+          },
+          () => {
+            resolve();
           }
-        }
-      );
+        );
+      });
     },
   },
 });
diff --git a/refresh/index.wxml b/refresh/index.wxml
@@ -1,13 +1,13 @@
-<view class="wx-coolui-scroller-refresh refresh-class" style="height:{{config.height}}px;{{config.background.img?'background-image:url('+config.background.img+');':''}}padding-top:{{config.background.height? config.background.height - config.height : 0}}px">
+<view class="wx-coolui-scroller-refresh refresh-class" style="height:{{config.height}}px;{{config.background.img?'background-image:url('+config.background.img+');':''}}padding-top:{{config.background.height? config.background.height - config.height : 0}}px;">
   <view class="refresh-inner" wx:if="{{type == 'base'}}" style="height:{{config.height}}px;color:{{config.text.color}};{{config.text.shadow?'config.text-shadow:0 0 '+config.text.shadow+'rpx '+config.text.color+';':''}}">
-    <view class="down  {{!triggered?'loading':''}}" style="transform: rotate({{threshold*180}}deg);">
-      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{!triggered?'background-color:transparent':'background-color:' + config.text.color}}"></view>
-      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{!triggered?'background-color:transparent':'background-color:' + config.text.color}}"></view>
-      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{!triggered?'background-color:transparent':'background-color:' + config.text.color}}"></view>
+    <view class="down  {{triggered && isloading?'loading':''}}" style="transform: rotate({{threshold*180}}deg);">
+      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{triggered && isloading?'background-color:transparent':'background-color:' + config.text.color}}"></view>
+      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{triggered && isloading?'background-color:transparent':'background-color:' + config.text.color}}"></view>
+      <view class="line" style="border-color:{{config.text.color}} transparent transparent;{{triggered && isloading?'background-color:transparent':'background-color:' + config.text.color}}"></view>
     </view>
-    <block wx:if="{{threshold < 0.5 &&  triggered}}">下拉刷新</block>
-    <block wx:elif="{{threshold > 0.5 &&  threshold <= 1 &&  triggered}}">松手刷新</block>
-    <block wx:elif="{{!triggered}}">刷新中...</block>
+    <block wx:if="{{refreshstate == 'pulldown'}}">下拉刷新</block>
+    <block wx:elif="{{refreshstate == 'loosen'}}">松手刷新</block>
+    <block wx:elif="{{refreshstate == 'loading'}}">刷新中...</block>
   </view>
   <slot name="parallax" />
   <slot />