258资源分享网

前言微信小程序自去年公测以来，我司也申请了一个帐号开发，春节前后开始开发，现在终于告一个段落了。谨以此文记录下踩过的坑。坑1：scroll-view与onPullDownRefresh冲突由于有几个 ...

前言 
微信小程序自去年公测以来，我司也申请了一个帐号开发，春节前后开始开发，现在终于告一个段落了。谨以此文记录下踩过的坑。

坑1：scroll-view与onPullDownRefresh冲突 
由于有几个页面需要将导航tab栏自动置顶，所以使用了scroll-view。然而又想要下拉刷新，本来想直接使用onPullDownRefresh，结果却发现下拉的时候onPullDownRefresh根本没有！囧！

研究了半天，最终监听touchXXX自己模拟了个下拉刷新。（具体实现方案改日再分享。）为了尽量接近微信原生的下拉刷新，还特意抄了半天微信原生的下拉刷新动画...

<divclass="loading"><divclass="dot"></div></div>

.loading{

display: block;

width:100%;

height:20px;

padding:20px0;

text-align: center;

background:#eee;

}

.loading::before,

.loading .dot,

.loading::after

{

content:'';

display:inline-block;

color: transparent;

width:14px;

height:14px;

border-radius:14px;

background:#fff;

overflow: hidden;

margin:08px;

}

.loading::before,

.loading .dot,

.loading::after{

-webkit-animation: pulldown-refresh-loader 1.4s infinite ease-in-out;

animation: pulldown-refresh-loader 1.4s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.loading::before{

-webkit-animation-delay:-0.32s;

animation-delay:-0.32s;

}

.loading .dot{

-webkit-animation-delay:-0.16s;

animation-delay:-0.16s;

}

@-webkit-keyframes pulldown-refresh-loader {