🐞 fix(scroller): 修复ios下的一些bug

修复由于ios下scroll-view与页面滚动冲突造成下拉闪烁的bug
wzs28150 · Oct 24, 2024 · 8e1de6c · 8e1de6c
1 parent 4833010
commit 8e1de6c
Show file tree

Hide file tree

Showing 86 changed files with 906 additions and 305 deletions.
diff --git a/demo/miniprogram_npm/coolui-scroller/README.md b/demo/miniprogram_npm/coolui-scroller/README.md
@@ -24,7 +24,7 @@ Page({
   onPageScroll: function () {
     // 监听用户滑动页面事件。
   },
-});
+})
 ```
 
 2. 组件级的：利用 scroll-view。 但是当你打开 scroll-view 官方文档时，映入眼帘的是一列列的参数属性方法。要完全弄懂里面的内容，恐怕你得上手写写，挨个试试里面的参数和方法才行。而对于下拉刷新这个效果文档上有个简易的 demo 可寻。上拉加载也只有 bindscrolltolower 这么个方法和 lower-threshold 阈值。所以要实现起来完全还得靠自己。
@@ -111,23 +111,14 @@ scroll: {
 10. ~~新增组件 coolui-scroller-parallax(下拉刷新视差位移组件)~~
 11. ~~新增组件 coolui-scroller-search(搜索组件)~~
 12. ~~新增组件 coolui-scroller-sort(分类筛选及排序组件)~~
-
-### 支持 coolui-scroller
-
-做一个组件库是一个繁琐且长期的事情，接下来我将花费业余时间进行多版本的完善。
-如果 coolui-scroller 对您的工作或者学习有所帮助，您可以捐赠 coolui-scroller 的研发工作，捐赠无门槛，哪怕是一瓶肥宅快乐水，也可以帮助我多敲半小时代码。
-
-| 微信                                       | 支付宝 |
-| ------------------------------------------ | ------ |
-| ![微信](https://wzs28150.github.io/coolui-scroller/v3/images/wx.jpg) | ![支付宝](https://wzs28150.github.io/coolui-scroller/v3/images/zfb.jpg) |
+13. ~~新增组件 coolui-scroller-floor(下拉二楼组件)~~
 
 ## 示例 demo
 
 请微信扫码打开小程序查看
 
 ![示例](https://wzs28150.github.io/coolui-scroller/v3/images/demo.jpg)
 
-
 示例代码： [https://github.com/wzs28150/coolui-scroller/tree/demo](https://github.com/wzs28150/coolui-scroller/tree/demo)
 
 请 clone 下载到本地使用微信开发者工具查看
@@ -166,7 +157,7 @@ npm i coolui-scroller --production
 ### 2.页面结构
 
 ```html
-<scroller class="my-scroller" > </scroller>
+<scroller class="my-scroller"> </scroller>
 ```
 
 ### 3.配置
@@ -176,3 +167,28 @@ npm i coolui-scroller --production
 ### 4.组件
 
 根据自己的业务场景选用组件，也可以在对应的插槽中自定义
+
+## 赞助
+
+做一个组件库是一个繁琐且长期的事情，接下来我将花费业余时间进行多版本的完善。
+如果 coolui-scroller 对您的工作或者学习有所帮助，您可以捐赠 coolui-scroller 的研发工作，捐赠无门槛，哪怕是一瓶肥宅快乐水，也可以帮助我多敲半小时代码。
+
+| 微信                                                                 | 支付宝                                                                  |
+| -------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| ![微信](https://wzs28150.github.io/coolui-scroller/v3/images/wx.jpg) | ![支付宝](https://wzs28150.github.io/coolui-scroller/v3/images/zfb.jpg) |
+
+## 社群
+
+### github 论坛
+
+如果你有问题想寻求帮助，或者有任何想要分享的，欢迎到 [GitHub Discussions](https://github.com/wzs28150/coolui-scroller/discussions) 发帖。
+
+### 交流群
+
+coolui-scroller 有多个交流群：
+
+QQ：[点击加入](https://qm.qq.com/cgi-bin/qm/qr?authKey=fy9bB5aA1RX7P931EYgaGEVUbP1OJAh3TrYJrB1HZiIt1MlAOowL53Ybz3X1PZPJ&k=m22V8nGscs3SJjchYj0J8XsaX5gS98pW&noverify=0)
+
+Discord：[点击加入](https://discord.com/invite/8MPGMebT)
+
+微信：请添加作者微信 `mrxc1989`，他会邀请你入群。添加作者微信时，请备注加群意图。
diff --git a/demo/miniprogram_npm/coolui-scroller/nav/index.scss b/demo/miniprogram_npm/coolui-scroller/nav/index.scss
@@ -49,7 +49,7 @@
           width           : 100%;
           height          : 60%;
           background-color: #ccc;
-          transition      : width 0.4s;
+          transition      : color 0.4s;
           border-radius   : 50px;
           z-index         : 0;
         }

diff --git a/demo/miniprogram_npm/coolui-scroller/package.json b/demo/miniprogram_npm/coolui-scroller/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coolui-scroller",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "description": "微信小程序Scroll 上拉加载下拉刷新组件 ",
   "main": "./index.js",
   "scripts": {

diff --git a/demo/miniprogram_npm/coolui-scroller/scroller/index.wxml b/demo/miniprogram_npm/coolui-scroller/scroller/index.wxml
@@ -2,7 +2,7 @@
   <view class="slot-header" id="header">
     <slot name="header"></slot>
   </view>
-  <scroll-view scroll-y class="scroll flex" enable-passive="{{true}}" enhanced="{{true}}" fast-deceleration="{{true}}" enable-back-to-top="{{true}}" enable-flex="{{enableFlex}}" refresher-enabled="{{type?true:false}}" refresher-threshold="{{refreshConfig.height?refreshConfig.height:50}}" lower-threshold="{{100}}" refresher-default-style="{{type == 'default' ? refreshConfig.style : 'none'}}" refresher-background="{{refreshConfig.background.color}}" refresher-triggered="{{triggered}}" bindrefresherrefresh="onDefaultRefresh" bindrefresherpulling="onPulling" bindrefresherrestore="onRestore" bindscrolltolower="onLoadmore" bindscroll="scroll" bind:touchend="dragend" scroll-top="{{top}}" scroll-with-animation="{{animation}}" scroll-into-view="{{toView}}" style="height:{{contentHeight}}px;">
+  <scroll-view scroll-y="{{threshold>0 ? false : true}}" class="scroll flex" enable-passive="{{true}}" enhanced="{{true}}" fast-deceleration="{{true}}" enable-back-to-top="{{true}}" enable-flex="{{enableFlex}}" refresher-enabled="{{type?true:false}}" refresher-threshold="{{refreshConfig.height?refreshConfig.height:50}}" lower-threshold="{{100}}" refresher-default-style="{{type == 'default' ? refreshConfig.style : 'none'}}" refresher-background="{{refreshConfig.background.color}}" refresher-triggered="{{triggered}}" bindrefresherrefresh="onDefaultRefresh" bindrefresherpulling="onPulling" bindrefresherrestore="onRestore" bindscrolltolower="onLoadmore" bindscroll="scroll" bind:touchend="dragend" scroll-top="{{top}}" scroll-with-animation="{{animation}}" scroll-into-view="{{toView}}" style="height:{{contentHeight}}px;">
     <view slot="refresher" wx:if="{{type != 'default'}}" class="refresh-container">
       <slot name="refresh"></slot>
     </view>

diff --git a/demo/pages/combined/index.json b/demo/pages/combined/index.json
@@ -12,5 +12,6 @@
     "backtotop": "coolui-scroller/backToTop/index"
   },
   "pageOrientation": "auto",
+  "disableScroll": true,
   "navigationBarTitleText": "组合使用"
-}
+}
diff --git a/demo/pages/demo/animation/bingdwendwen/index.json b/demo/pages/demo/animation/bingdwendwen/index.json
@@ -3,6 +3,7 @@
     "scroller": "coolui-scroller/scroller/index",
     "refresh": "coolui-scroller/refresh/index"
   },
+  "disableScroll": true,
   "pageOrientation": "auto",
   "navigationBarTitleText": "冰墩墩"
 }
diff --git a/demo/pages/demo/animation/christmas/index.json b/demo/pages/demo/animation/christmas/index.json
@@ -3,6 +3,7 @@
     "scroller": "coolui-scroller/scroller/index",
     "refresh": "coolui-scroller/refresh/index"
   },
+  "disableScroll": true,
   "pageOrientation": "auto",
   "navigationBarTitleText": "圣诞老人"
 }
diff --git a/demo/pages/demo/animation/fly/index.json b/demo/pages/demo/animation/fly/index.json
@@ -3,6 +3,7 @@
     "scroller": "coolui-scroller/scroller/index",
     "refresh": "coolui-scroller/refresh/index"
   },
+  "disableScroll": true,
   "pageOrientation": "auto",
   "navigationBarTitleText": "飞上云霄"
 }
diff --git a/demo/pages/demo/animation/noodles/index.json b/demo/pages/demo/animation/noodles/index.json
@@ -4,5 +4,6 @@
     "refresh": "coolui-scroller/refresh/index"
   },
   "pageOrientation": "auto",
+  "disableScroll": true,
   "navigationBarTitleText": "魔性吃面"
 }
diff --git a/demo/pages/demo/animation/universe/index.json b/demo/pages/demo/animation/universe/index.json
@@ -4,6 +4,7 @@
     "refresh": "coolui-scroller/refresh/index"
   },
   "pageOrientation": "auto",
+  "disableScroll": true,
   "navigationBarTitleText": "浩瀚宇宙",
   "navigationBarBackgroundColor": "#352b76"
 }
diff --git a/demo/pages/demo/combined/pics/index/index.json b/demo/pages/demo/combined/pics/index/index.json
@@ -7,5 +7,6 @@
     "header": "../component/header/index",
     "picsItem": "../component/pics_item/index"
   },
+  "disableScroll": true,
   "navigationBarTitleText": "图文社交"
 }
diff --git a/demo/pages/empty/index.json b/demo/pages/empty/index.json
@@ -2,5 +2,6 @@
   "usingComponents": {
     "empty": "coolui-scroller/empty/index"
   },
+  "disableScroll": true,
   "navigationBarTitleText": "空列表"
 }
diff --git a/demo/pages/hand/index.json b/demo/pages/hand/index.json
@@ -2,5 +2,6 @@
   "usingComponents": {
     "handtip": "coolui-scroller/handtip/index"
   },
+  "disableScroll": true,
   "navigationBarTitleText": "手势组件"
-}
+}
diff --git a/demo/pages/list/index.json b/demo/pages/list/index.json
@@ -3,5 +3,6 @@
     "scroller": "coolui-scroller/scroller/index",
     "item": "coolui-scroller/item/index"
   },
+  "disableScroll": true,
   "navigationBarTitleText": "滚动列表组件"
-}
+}
diff --git a/demo/pages/loadmore/index.json b/demo/pages/loadmore/index.json
@@ -4,5 +4,6 @@
     "scroller": "coolui-scroller/scroller/index",
     "item": "coolui-scroller/item/index"
   },
+  "disableScroll": true,
   "navigationBarTitleText": "加载更多"
-}
+}
diff --git a/demo/pages/nav/index.js b/demo/pages/nav/index.js
@@ -40,7 +40,7 @@ Page({
     textPlain: { color: '#ccc', activeColor: '#d13435' },
     backgroundPlain: { color: '#ccc', activeColor: '#d13435' },
     text: { color: '#333', activeColor: '#fff' },
-    background: { color: '#333', activeColor: '#d13435' },
+    background: { color: '#ccc', activeColor: '#d13435' },
   },
   onChange: function (e) {
     wx.showToast({

diff --git a/demo/pages/refresh/index.js b/demo/pages/refresh/index.js
@@ -78,6 +78,55 @@ Page({
     refreshstate: 'pulldown',
     isLoading: false,
     triggered: false,
+    nav: [
+      {
+        id: 1,
+        title: '原生效果',
+        description: '不使用组件',
+      },
+      {
+        id: 2,
+        title: '基础效果',
+        description: '使用组件',
+      },
+      {
+        id: 3,
+        title: 'logo文字效果',
+        description: '使用组件',
+      },
+      {
+        id: 4,
+        title: 'gif背景效果',
+        description: '隐藏文字将背景设为动图',
+      },
+      {
+        id: 5,
+        title: '视差效果1',
+        description: '搭配视差子组件实现',
+      },
+      {
+        id: 6,
+        title: '视差效果2',
+        description: '搭配视差子组件实现',
+      },
+      {
+        id: 7,
+        title: '视差效果3',
+        description: '搭配视差子组件实现',
+      },
+      {
+        id: 8,
+        title: '京东效果',
+      },
+      {
+        id: 9,
+        title: '饿了么效果',
+      },
+    ],
+    titleList: [],
+    text: { color: '#666', activeColor: '#fff' },
+    background: { color: '#ccc', activeColor: '#d13435' },
+    active: 0, // 当前选中的Index值
   },
   onLoad: function () {},
   onRefresh: function () {

diff --git a/demo/pages/refresh/index.json b/demo/pages/refresh/index.json
@@ -2,8 +2,10 @@
   "usingComponents": {
     "scroller": "coolui-scroller/scroller/index",
     "refresh": "coolui-scroller/refresh/index",
-    "parallax": "coolui-scroller/parallax/index"
+    "parallax": "coolui-scroller/parallax/index",
+    "nav": "coolui-scroller/nav/index"
   },
+  "disableScroll": true,
   "pageOrientation": "auto",
   "navigationBarTitleText": "下拉刷新组件"
 }
diff --git a/demo/pages/refresh/index.scss b/demo/pages/refresh/index.scss
@@ -10,6 +10,7 @@
     margin-bottom : 30rpx;
     display       : flex;
     flex-direction: column;
+    flex          : 1;
 
     .tip {
       float    : right;
@@ -18,19 +19,22 @@
     }
 
     .pannel-inner {
-      margin  : 20rpx 0;
-      padding : 0;
-      height  : 300rpx;
-      border  : 1px solid #eee;
-      overflow: hidden;
+      margin     : 20rpx 0;
+      padding    : 0;
+      // height  : 300rpx;
+      height     : calc(100vh - 60rpx - 74rpx - 66rpx - 40rpx - 2px - 84rpx);
+      border     : 1px solid #eee;
+      overflow   : hidden;
+      // flex    : 1;
 
       .scroller-pannel {
         display        : flex;
         justify-content: center;
         align-items    : center;
-        height         : 300rpx;
+        height         : calc(100vh - 60rpx - 74rpx - 66rpx - 40rpx - 2px - 84rpx);
         font-size      : 28rpx;
         color          : #999;
+        flex           : 1;
 
         .logoText {
           font-size                                : 50rpx;
@@ -169,7 +173,7 @@
           height          : 40px;
           background-size : cover;
           background-image: url('https://test.wzs.pub/pic/a.png');
-          animation       : play 0.5s steps(3) infinite;
+          animation       : move 0.5s steps(3) infinite;
         }
       }
 
@@ -201,22 +205,31 @@
   }
 }
 
-@keyframes play {
+.text-img {
+  width           : 26px;
+  height          : 40px;
+  background-size : cover;
+  background-image: url('https://test.wzs.pub/pic/a.png');
+  animation       : move 0.5s steps(3) infinite;
+  margin          : 0 auto;
+}
+
+@keyframes play2 {
   from {
     background-position: 0px 0px;
   }
 
   to {
-    background-position: -81px 0px;
+    background-position: -120px 0px;
   }
 }
 
-@keyframes play2 {
+@keyframes move {
   from {
     background-position: 0px 0px;
   }
 
   to {
-    background-position: -120px 0px;
+    background-position: -81px 0px;
   }
 }