diff --git a/demo/miniprogram_npm/coolui-scroller/README.md b/demo/miniprogram_npm/coolui-scroller/README.md
index a72742b..10afb7f 100644
--- 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,15 +111,7 @@ scroll: {
10. ~~新增组件 coolui-scroller-parallax(下拉刷新视差位移组件)~~
11. ~~新增组件 coolui-scroller-search(搜索组件)~~
12. ~~新增组件 coolui-scroller-sort(分类筛选及排序组件)~~
-
-### 支持 coolui-scroller
-
-做一个组件库是一个繁琐且长期的事情，接下来我将花费业余时间进行多版本的完善。
-如果 coolui-scroller 对您的工作或者学习有所帮助，您可以捐赠 coolui-scroller 的研发工作，捐赠无门槛，哪怕是一瓶肥宅快乐水，也可以帮助我多敲半小时代码。
-
-| 微信 | 支付宝 |
-| ------------------------------------------ | ------ |
-|  |  |
+13. ~~新增组件 coolui-scroller-floor(下拉二楼组件)~~
## 示例 demo
@@ -127,7 +119,6 @@ scroll: {
-
示例代码： [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
-
+
```
### 3.配置
@@ -176,3 +167,28 @@ npm i coolui-scroller --production
### 4.组件
根据自己的业务场景选用组件，也可以在对应的插槽中自定义
+
+## 赞助
+
+做一个组件库是一个繁琐且长期的事情，接下来我将花费业余时间进行多版本的完善。
+如果 coolui-scroller 对您的工作或者学习有所帮助，您可以捐赠 coolui-scroller 的研发工作，捐赠无门槛，哪怕是一瓶肥宅快乐水，也可以帮助我多敲半小时代码。
+
+| 微信 | 支付宝 |
+| -------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+|  |  |
+
+## 社群
+
+### 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
index 56074da..ba92ce1 100644
--- 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
index 16e1b74..533ea93 100644
--- 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
index dc58b5f..7c9758c 100644
--- a/demo/miniprogram_npm/coolui-scroller/scroller/index.wxml
+++ b/demo/miniprogram_npm/coolui-scroller/scroller/index.wxml
@@ -2,7 +2,7 @@
-
+
diff --git a/demo/pages/combined/index.json b/demo/pages/combined/index.json
index e0fda3e..0f05c12 100644
--- 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": "组合使用"
-}
\ No newline at end of file
+}
diff --git a/demo/pages/demo/animation/bingdwendwen/index.json b/demo/pages/demo/animation/bingdwendwen/index.json
index 32fa9f9..713b2d2 100644
--- 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
index c07f333..3e32825 100644
--- 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
index 2c8513b..177db6f 100644
--- 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
index c4068b8..4434934 100644
--- 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
index 6b6aa96..3591e2f 100644
--- 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
index 7b2a06c..c197374 100644
--- 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
index 84717e8..431360d 100644
--- 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
index 3a38ba8..53625cc 100644
--- 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": "手势组件"
-}
\ No newline at end of file
+}
diff --git a/demo/pages/list/index.json b/demo/pages/list/index.json
index d195df5..941230f 100644
--- 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": "滚动列表组件"
-}
\ No newline at end of file
+}
diff --git a/demo/pages/loadmore/index.json b/demo/pages/loadmore/index.json
index 4316975..977bcef 100644
--- 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": "加载更多"
-}
\ No newline at end of file
+}
diff --git a/demo/pages/nav/index.js b/demo/pages/nav/index.js
index fae5546..27fb596 100644
--- 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
index 070ae46..9f31eb7 100644
--- 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
index edcb46e..d7567ae 100644
--- 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
index c2cbd32..2161b82 100644
--- 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;
}
}
\ No newline at end of file
diff --git a/demo/pages/refresh/index.wxml b/demo/pages/refresh/index.wxml
index a721622..7c084cb 100644
--- a/demo/pages/refresh/index.wxml
+++ b/demo/pages/refresh/index.wxml
@@ -1,56 +1,41 @@
下拉刷新组件
+
- 原生效果
- 不使用组件
-
-
+ {{nav[active].title}}
+
+ {{nav[active].description}}
+ {{active == 7? ('threshold：'+ val) : ''}}
+ {{active == 8? ('refreshstate：'+ refreshstate) : ''}}
+
+
+
下拉查看效果
-
-
- 基础效果
- 使用组件
-
-
+
下拉查看效果
-
-
- logo文字效果
- 使用组件
-
-
+
下拉查看效果
-
-
- gif背景效果
- 隐藏文字将背景设为动图
-
-
+
天猫动图,下拉查看效果
-
-
- 视差效果
- 搭配视差子组件实现
-
-
+
@@ -69,7 +54,7 @@
不同方向,下拉查看效果
-
+
@@ -88,7 +73,7 @@
同方向不同位移数值,下拉查看效果
-
+
@@ -127,12 +112,7 @@
-
-
- 京东效果
- threshold：{{val}}
-
-
+
@@ -153,12 +133,7 @@
-
-
- 饿了么效果
- refreshstate: {{refreshstate}}
-
-
+
diff --git a/demo/pages/refresh/index.wxss b/demo/pages/refresh/index.wxss
index cbbdf66..8ca5e28 100644
--- a/demo/pages/refresh/index.wxss
+++ b/demo/pages/refresh/index.wxss
@@ -6,36 +6,33 @@
display: flex;
flex-direction: column;
}
-
.page .pannel {
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
+ flex: 1;
}
-
.page .pannel .tip {
float: right;
color: #999;
font-size: 24rpx;
}
-
.page .pannel .pannel-inner {
margin: 20rpx 0;
padding: 0;
- height: 300rpx;
+ height: calc(100vh - 60rpx - 74rpx - 66rpx - 40rpx - 2px - 84rpx);
border: 1px solid #eee;
overflow: hidden;
}
-
.page .pannel .pannel-inner .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;
}
-
.page .pannel .pannel-inner .scroller-pannel .logoText {
font-size: 50rpx;
font-weight: bold;
@@ -47,88 +44,75 @@
animation: play2 3s infinite linear;
text-shadow: 0 0 1rpx #000 outset;
}
-
.page .pannel .pannel-inner .parallax-item {
color: #000;
font-size: 28rpx;
height: 1em;
line-height: 1em;
}
-
.page .pannel .pannel-inner .parallax-item.parallax-item1 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -2em;
}
-
.page .pannel .pannel-inner .parallax-item.parallax-item2 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -2em;
}
-
.page .pannel .pannel-inner .parallax-item.parallax-item3 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -4em;
}
-
.page .pannel .pannel-inner .parallax-item.parallax-item4 {
top: 50%;
left: 50%;
margin-top: -0.5em;
}
-
.page .pannel .pannel-inner .parallax-sitem {
color: #000;
font-size: 28rpx;
height: 1em;
line-height: 1em;
}
-
.page .pannel .pannel-inner .parallax-sitem.parallax-item1 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -3em;
}
-
.page .pannel .pannel-inner .parallax-sitem.parallax-item2 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: 0em;
}
-
.page .pannel .pannel-inner .parallax-sitem.parallax-item3 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: -6em;
}
-
.page .pannel .pannel-inner .parallax-sitem.parallax-item4 {
top: 50%;
left: 50%;
margin-top: -0.5em;
margin-left: 3em;
}
-
.page .pannel .pannel-inner .parallax-demoitem {
width: 100%;
height: 70px;
top: 0;
left: 0;
}
-
.page .pannel .pannel-inner .parallax-demoitem .img {
width: 100%;
height: 70px;
}
-
.page .pannel .pannel-inner .jd-refresh {
width: 100%;
height: 100%;
@@ -138,14 +122,12 @@
font-size: 28rpx;
position: relative;
}
-
.page .pannel .pannel-inner .jd-wapper {
width: 26px;
height: 40px;
margin-right: 20rpx;
position: relative;
}
-
.page .pannel .pannel-inner .jd-wapper .moveimg {
width: 26px;
height: 40px;
@@ -155,7 +137,6 @@
left: 0;
top: 0;
}
-
.page .pannel .pannel-inner .jd-wapper .moveimg2 {
width: 26px;
height: 40px;
@@ -165,29 +146,25 @@
left: 0;
top: 0;
}
-
.page .pannel .pannel-inner .jd-wapper .img {
width: 26px;
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;
}
-
.page .pannel .pannel-inner .elm-refresh .elm-wapper {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
}
-
.page .pannel .pannel-inner .elm-refresh .elm-wapper .text {
text-align: center;
font-size: 28rpx;
color: #999;
margin-bottom: 10px;
}
-
.page .pannel .pannel-inner .elm-refresh .exb {
width: 30px;
height: 30px;
@@ -197,20 +174,28 @@
margin: 0 auto;
}
-@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;
}
-}
+}/*# sourceMappingURL=index.wxss.map */
\ No newline at end of file
diff --git a/demo/pages/refresh/index.wxss.map b/demo/pages/refresh/index.wxss.map
new file mode 100644
index 0000000..101915c
--- /dev/null
+++ b/demo/pages/refresh/index.wxss.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.wxss"],"names":[],"mappings":"AAAA;EACE,iBAAA;EACA,yBAAA;EACA,gBAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;ACCF;ADCE;EACE,oBAAA;EACA,aAAA;EACA,sBAAA;EACA,OAAA;ACCJ;ADCI;EACE,YAAA;EACA,WAAA;EACA,gBAAA;ACCN;ADEI;EACE,eAAA;EACA,UAAA;EAEA,iEAAA;EACA,sBAAA;EACA,gBAAA;ACDN;ADIM;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,iEAAA;EACA,gBAAA;EACA,WAAA;EACA,OAAA;ACFR;ADIQ;EACE,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;EACA,kBAAA;EACA,sBAAA;EACA,uDAAA;EAGA,mCAAA;EACA,iCAAA;ACJV;ADQM;EACE,WAAA;EACA,gBAAA;EACA,WAAA;EACA,gBAAA;ACNR;ADQQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;ACNV;ADSQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;ACPV;ADUQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;ACRV;ADWQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;ACTV;ADaM;EACE,WAAA;EACA,gBAAA;EACA,WAAA;EACA,gBAAA;ACXR;ADaQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;ACXV;ADcQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,gBAAA;ACZV;ADeQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;ACbV;ADgBQ;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,gBAAA;ACdV;ADkBM;EACE,WAAA;EACA,YAAA;EACA,MAAA;EACA,OAAA;AChBR;ADkBQ;EACE,WAAA;EACA,YAAA;AChBV;ADoBM;EACE,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;EACA,kBAAA;AClBR;ADqBM;EACE,WAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;ACnBR;ADqBQ;EACE,WAAA;EACA,YAAA;EACA,sBAAA;EACA,yDAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;ACnBV;ADsBQ;EACE,WAAA;EACA,YAAA;EACA,sBAAA;EACA,yDAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;ACpBV;ADuBQ;EACE,WAAA;EACA,YAAA;EACA,sBAAA;EACA,uDAAA;EACA,sCAAA;ACrBV;AD0BQ;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;ACxBV;AD0BU;EACE,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;ACxBZ;AD4BQ;EACE,WAAA;EACA,YAAA;EACA,sBAAA;EACA,mEAAA;EACA,uCAAA;EACA,cAAA;AC1BV;;ADiCA;EACE,WAAA;EACA,YAAA;EACA,sBAAA;EACA,uDAAA;EACA,sCAAA;EACA,cAAA;AC9BF;;ADiCA;EACE;IACE,4BAAA;EC9BF;EDiCA;IACE,+BAAA;EC/BF;AACF;ADkCA;EACE;IACE,4BAAA;EChCF;EDmCA;IACE,8BAAA;ECjCF;AACF","file":"index.wxss"}
\ No newline at end of file
diff --git a/demo/pages/second-floor/index.wxml b/demo/pages/second-floor/index.wxml
index 7905785..f97b5f3 100644
--- a/demo/pages/second-floor/index.wxml
+++ b/demo/pages/second-floor/index.wxml
@@ -1,6 +1,6 @@
-
+
我是二楼顶部
我是二楼中部
我是二楼底部
diff --git a/demo/pages/second-floor/index.wxss b/demo/pages/second-floor/index.wxss
index b621ab3..0478258 100644
--- a/demo/pages/second-floor/index.wxss
+++ b/demo/pages/second-floor/index.wxss
@@ -3,19 +3,19 @@ page {
}
.second-floor {
- color: #fff;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- scroll-snap-align: start;
- scroll-snap-stop: always;
- position: relative;
- background-size: cover;
+ color : #fff;
+ display : flex;
+ flex-direction : column;
+ justify-content : space-between;
+ align-items : center;
+ scroll-snap-align : start;
+ scroll-snap-stop : always;
+ position : relative;
+ background-size : cover;
background-position: center;
- height: 100%;
- position: absolute;
- width: 100%;
+ height : 100%;
+ position : absolute;
+ width : 100%;
}
.second-floor view {
@@ -23,7 +23,7 @@ page {
}
.weui-cell.weui-check__label {
- display: flex;
+ display : flex;
align-items: center;
}
@@ -32,14 +32,14 @@ page {
}
.demopage .pannel-inner .scroller-pannel .des {
- text-align: left;
+ text-align : left;
margin-bottom: 20rpx;
}
radio-group {
- display: flex;
+ display : flex;
justify-content: space-between;
- margin-bottom: 20rpx;
+ margin-bottom : 20rpx;
}
switch {
@@ -47,10 +47,10 @@ switch {
}
.detail-page {
- width: 100%;
- height: 100%;
- min-height: 300px;
- display: flex;
- align-items: center;
+ width : 100%;
+ height : 100%;
+ min-height : 300px;
+ display : flex;
+ align-items : center;
justify-content: center;
-}
+}
\ No newline at end of file
diff --git a/demo/project.private.config.json b/demo/project.private.config.json
index 54f7ee3..3b3f223 100644
--- a/demo/project.private.config.json
+++ b/demo/project.private.config.json
@@ -8,6 +8,13 @@
"condition": {
"miniprogram": {
"list": [
+ {
+ "name": "下拉刷新",
+ "pathName": "pages/refresh/index",
+ "query": "",
+ "launchMode": "default",
+ "scene": null
+ },
{
"name": "淘宝二楼",
"pathName": "pages/demo/second-floor/taobao/index",
@@ -134,6 +141,6 @@
}
},
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
- "libVersion": "3.3.0",
+ "libVersion": "3.6.2",
"projectname": "demo"
}
\ No newline at end of file
diff --git a/doc/.vitepress/config.js b/doc/.vitepress/config.js
index cffab63..4d041e0 100644
--- a/doc/.vitepress/config.js
+++ b/doc/.vitepress/config.js
@@ -38,9 +38,13 @@ export default defineConfig({
{
text: 'v' + info.version,
items: [
+ {
+ text: 'v3.3.7',
+ link: '/version.md#v3-3-7',
+ },
{
text: 'v3.3.6',
- link: '/version.md#v3-3-5',
+ link: '/version.md#v3-3-6',
},
{
text: 'v3.3.4',
diff --git a/doc/components/scroller.md b/doc/components/scroller.md
index cbf9745..8e0816f 100644
--- a/doc/components/scroller.md
+++ b/doc/components/scroller.md
@@ -188,3 +188,17 @@ Page({
| 名称 | 用法 | 说明 | 返回参数 | 版本 |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----- |
| settriggered | 先获取组件实例：
`const scroller = this.selectComponent('.elm-scroller');`, 然后调用方法：
`scroller.settriggered(false)` | 在 refresh 方法中执行，当刷新组件设置不自动回弹时，设置手动回弹，可增加 setTimeout 设置回弹时机。详见[非自动回弹](./refresh.md#非自动回弹) | promise | 3.0.4 |
+
+## 注意
+
+> 下拉刷新(除下拉二楼组件)与页面级的滚动下拉刷新效果会有冲突，建议关闭页面级的滚动，页面设置中需增加"disableScroll": true。
+
+```json
+{
+ "usingComponents": {
+ "scroller": "coolui-scroller/scroller/index",
+ "refresh": "coolui-scroller/refresh/index"
+ },
+ "disableScroll": true
+}
+```
diff --git a/doc/version.md b/doc/version.md
index 6e21cdc..361e036 100644
--- a/doc/version.md
+++ b/doc/version.md
@@ -1,5 +1,9 @@
# 版本更新
+### v3.3.7
+
+1. 修改 scroller 组件 解决 ios 下下拉与滚动相互冲突带来的闪烁 bug。
+
### v3.3.6
1. 修改 scroller 组件 解决滚动时由于未使用 backToTop 缺少判断时造成的 data 不存在的 bug。
diff --git a/index copy.wxml b/index copy.wxml
new file mode 100644
index 0000000..a721622
--- /dev/null
+++ b/index copy.wxml
@@ -0,0 +1,186 @@
+
+
+ 下拉刷新组件
+
+
+ 原生效果
+ 不使用组件
+
+
+
+
+ 下拉查看效果
+
+
+
+
+ 基础效果
+ 使用组件
+
+
+
+
+ 下拉查看效果
+
+
+
+
+ logo文字效果
+ 使用组件
+
+
+
+
+ 下拉查看效果
+
+
+
+
+ gif背景效果
+ 隐藏文字将背景设为动图
+
+
+
+
+ 天猫动图,下拉查看效果
+
+
+
+
+ 视差效果
+ 搭配视差子组件实现
+
+
+
+
+
+ 从下往上
+
+
+ 从上往下
+
+
+ 从左往右
+
+
+ 从右往左
+
+
+ 不同方向,下拉查看效果
+
+
+
+
+
+
+ 视差2
+
+
+ 视差3
+
+
+ 视差1
+
+
+ 视差4
+
+
+ 同方向不同位移数值,下拉查看效果
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多元素位移实现场景
+ 下拉查看效果
+
+
+
+
+
+
+ 京东效果
+ threshold：{{val}}
+
+
+
+
+
+
+
+
+
+
+
+ 让购物更便捷
+
+
+
+ 自定义描述场景贴合应用内容
+ 使用threshold数值变化控制动画
+ 下拉查看效果
+
+
+
+
+
+
+ 饿了么效果
+ refreshstate: {{refreshstate}}
+
+
+
+
+
+
+
+ 下拉刷新
+ 松手刷新
+ 刷新中
+
+
+
+
+
+
+
+ 自定义使用吉祥物增加乐趣
+ 使用refreshstate状态控制动画
+ 设置非自动回弹，可查看源码是如何操作的
+ 下拉查看效果
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 6893816..4a25c7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coolui-scroller",
- "version": "3.3.6",
+ "version": "3.3.7",
"description": "",
"main": "packages/index.js",
"files": [
diff --git a/packages/nav/index.scss b/packages/nav/index.scss
index 56074da..ba92ce1 100644
--- a/packages/nav/index.scss
+++ b/packages/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/packages/package.json b/packages/package.json
index 5aa55b8..533ea93 100644
--- a/packages/package.json
+++ b/packages/package.json
@@ -1,6 +1,6 @@
{
"name": "coolui-scroller",
- "version": "3.3.6",
+ "version": "3.3.7",
"description": "微信小程序Scroll 上拉加载下拉刷新组件 ",
"main": "./index.js",
"scripts": {
diff --git a/packages/scroller-v2/index.js b/packages/scroller-v2/index.js
new file mode 100644
index 0000000..ad646b5
--- /dev/null
+++ b/packages/scroller-v2/index.js
@@ -0,0 +1,231 @@
+Component({
+ options: {
+ multipleSlots: true,
+ addGlobalClass: true,
+ },
+ relations: {
+ '../scroll-page/index': {
+ type: 'child',
+ linked: function (target) {},
+ },
+ '../nav/index': {
+ type: 'child',
+ linked: function (target) {},
+ },
+ '../empty/index': {
+ type: 'child',
+ linked: function (target) {},
+ },
+ '../refresh/index': {
+ type: 'child',
+ linked: function (target) {
+ this.setData({
+ type: target.data.type,
+ refreshConfig: target.data.config,
+ })
+ },
+ },
+ '../backToTop/index': {
+ type: 'child',
+ linked: function (target) {
+ this.setData({
+ isBackBtn: true,
+ })
+ },
+ },
+ '../nav-pannel/index': {
+ type: 'parent',
+ linked: function (target) {
+ // console.log(target)
+ },
+ },
+ },
+ properties: {
+ isEmpty: {
+ type: Boolean,
+ value: false,
+ },
+ background: {
+ type: String,
+ value: '#f2f2f2',
+ },
+ isBackBtn: {
+ type: Boolean,
+ value: false,
+ },
+ enableFlex: {
+ type: Boolean,
+ value: false,
+ },
+ toView: {
+ type: String,
+ value: '',
+ },
+ top: {
+ type: Number,
+ value: 0,
+ },
+ animation: {
+ type: Boolean,
+ value: true,
+ },
+ },
+ data: {
+ active: false,
+ contentHeight: 0,
+ triggered: false,
+ isLoading: false,
+ timeout: null,
+ isBackToTopShow: false,
+ innerAnimationData: {},
+ threshold: 0,
+ refreshConfig: {
+ shake: false,
+ height: 50,
+ style: 'black',
+ },
+ touchy: 0,
+ },
+ ready() {
+ this.setWapHeight()
+ this.refreshNodes = this.getRelationNodes('../refresh/index')
+ this.refreshNode = this.refreshNodes[0] ? this.refreshNodes[0] : null
+ console.log(this.refreshNode)
+
+ this.backToTopNodes = this.getRelationNodes('../backToTop/index')
+
+ this.backToTopNode = this.backToTopNodes[0] ? this.backToTopNodes[0] : null
+ const animationInner = this.setAnimation(-this.data.refreshConfig.height, 0)
+ this.setData({
+ innerAnimationData: animationInner ? animationInner.export() : {},
+ })
+ },
+ methods: {
+ setWapHeight() {
+ const that = this
+ const query = that.createSelectorQuery().in(this)
+ query
+ .select('#content')
+ .boundingClientRect(function (res) {
+ if (res) {
+ that.setData({
+ contentHeight: res.height,
+ })
+
+ that.triggerEvent('contentHeight', res.height)
+ }
+ })
+ .select('#header')
+ .boundingClientRect(function (headerRes) {
+ if (headerRes) {
+ that.setData({
+ contentHeight: that.data.contentHeight - headerRes.height,
+ })
+ that.triggerEvent(
+ 'contentHeight',
+ that.data.contentHeight - headerRes.height
+ )
+ }
+ })
+ .exec()
+ },
+ setAnimation(
+ y,
+ duration = 400,
+ scale = 1,
+ opacity = 1,
+ timingFunction = 'ease-out'
+ ) {
+ let transformOrigin = '50% 50% 0'
+ if (this.data.top) {
+ transformOrigin = '50% 0 0'
+ }
+ if (this.data.bottom) {
+ transformOrigin = '50% 100% 0'
+ }
+ if (this.data.center) {
+ transformOrigin = '50% 50% 0'
+ }
+ const animation = wx.createAnimation({
+ delay: 0,
+ duration: duration,
+ timingFunction: timingFunction,
+ transformOrigin: transformOrigin,
+ })
+ animation.translateY(y).scale(scale, scale).opacity(opacity)
+
+ animation.step()
+
+ return animation
+ },
+ touchStart(e) {
+ // 正在刷新时不操作触摸
+ if (this.data.isLoading) {
+ return false
+ }
+ this.setData({
+ touchy: e.changedTouches[0].clientY,
+ })
+ },
+ touchMove(e) {
+ // 正在刷新时不进行操作, 二楼已加载是不进行操作
+ if (!this.data.isLoading) {
+ const distance = Math.round(
+ e.changedTouches[0].clientY - this.data.touchy
+ )
+ let value = 0
+ const slowdownFactor = 0.2
+
+ // 根据拖拽距离（纵向）和系数计算数值，使其增长得更慢
+ // 使用Math.max确保值不会小于0，Math.min确保值不会超过1
+ value = Math.min(
+ 1.1,
+ Math.max(0, 1 - 1 / (Math.abs(distance * slowdownFactor) + 1))
+ )
+ if (distance < 0) {
+ value = 0 // 如果向上拖拽，数值保持为0
+ }
+ // console.log(value)
+ let scrollTop = -this.data.refreshConfig.height
+ if (distance > 0) {
+ // -height + (height + offset) * (0~1) = 100
+ scrollTop = -this.data.refreshConfig.height + distance * value
+
+ let animation = this.setAnimation(scrollTop, 0)
+ // console.log(animationInner);
+ this.setData({
+ innerAnimationData: animation ? animation.export() : null,
+ threshold: value,
+ })
+ // console.log(this.refreshNode)
+
+ this.setThreshold(value)
+ }
+ }
+ },
+ touchEnd() {
+ let animation = this.setAnimation(-this.data.refreshConfig.height, 0)
+ this.setData({
+ innerAnimationData: animation ? animation.export() : null,
+ threshold: 0,
+ })
+ this.setThreshold(0)
+ },
+ setThreshold(p) {
+ const that = this
+ return new Promise((resolve) => {
+ if (that.refreshNode) {
+ // console.log(1)
+
+ that.refreshNode
+ .changeThreshold({
+ threshold: p,
+ })
+ .then(() => {
+ resolve()
+ })
+ }
+ })
+ },
+ },
+})
diff --git a/packages/scroller-v2/index.json b/packages/scroller-v2/index.json
new file mode 100644
index 0000000..78013bd
--- /dev/null
+++ b/packages/scroller-v2/index.json
@@ -0,0 +1,5 @@
+{
+ "component": true,
+ "usingComponents": {
+ }
+}
\ No newline at end of file
diff --git a/packages/scroller-v2/index.scss b/packages/scroller-v2/index.scss
new file mode 100644
index 0000000..f9885cc
--- /dev/null
+++ b/packages/scroller-v2/index.scss
@@ -0,0 +1,35 @@
+:host {
+ display: block;
+ width : 100%;
+ height : 100%;
+}
+
+
+
+.wrap {
+ display : block;
+ height : 100%;
+ overflow: hidden;
+ position: relative;
+
+ .slot-header {
+ position: relative;
+ z-index : 5;
+ }
+
+ .scroll-view {
+ .refresh-container {
+ width: 100%;
+ }
+
+ .inner {
+ .slot-empty {
+ position: absolute;
+ width : 100%;
+ bottom : 0;
+ left : 0;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/packages/scroller-v2/index.wxml b/packages/scroller-v2/index.wxml
new file mode 100644
index 0000000..3c79e12
--- /dev/null
+++ b/packages/scroller-v2/index.wxml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/scroller-v2/index.wxss b/packages/scroller-v2/index.wxss
new file mode 100644
index 0000000..f84e100
--- /dev/null
+++ b/packages/scroller-v2/index.wxss
@@ -0,0 +1,25 @@
+:host {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.wrap {
+ display: block;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+}
+.wrap .slot-header {
+ position: relative;
+ z-index: 5;
+}
+.wrap .scroll-view .refresh-container {
+ width: 100%;
+}
+.wrap .scroll-view .inner .slot-empty {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/packages/scroller/index.wxml b/packages/scroller/index.wxml
index dc58b5f..7c9758c 100644
--- a/packages/scroller/index.wxml
+++ b/packages/scroller/index.wxml
@@ -2,7 +2,7 @@
-
+
diff --git a/v3/404.html b/v3/404.html
index e7be883..444285e 100644
--- a/v3/404.html
+++ b/v3/404.html
@@ -11,9 +11,9 @@
- Skip to content 404
PAGE NOT FOUND
But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Skip to content 404
PAGE NOT FOUND
But if you don't change your direction, and if you keep looking, you may end up where you are heading.