微信小程序：关于下拉刷新PullDownRefresh

初略看了下文档，发现小程序js中有onPullDownRefresh回调，果断重写之

然而，却发现不管怎么下拉，始终触发不了js回调。

只好继续看文档，发现，需要在json中配置支持下拉刷新，即：

这个可以在appjson中进行全局配置，使所有页面都带有下拉刷新功能；也可以在需要下拉刷新功能的page对应的json中配置。

这下好了，下拉刷新功能完成了。

但是，还有一点点不完美的地方，别人的小程序，下拉刷新时，可以看到顶部有三个点闪烁的动画；而我的小程序顶部一片空白。

原来，还有一个配置，"backgroundTextStyle": ""，支持 dark/light；因为我的背景是白色的，此时，不进行这个配置，因为颜色的缘故，三个点闪烁的动画就看不到了，因此，白色背景需要进行以下配置：

此外，微信小程序还提供了停止下拉刷新效果的api，如果发现进入刷新状态，无法停止，可以使用这个api

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面 *** 作与交互性；

<a name="gXpSi"></a>

1、小程序提供的下拉刷新（无法自定义刷新动画）

可能遇到的问题：

1）下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画，可以在页面配置中配置背景文字颜色：

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求：2101

官方文档： scroll-view

3、原始scroll-view自定义下拉实现（为兼容2101一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离，主要事件bindtouchstart，bindtouchmove和bindtouchend，bindtouchmove记录手指开始下拉时的起始位置，bindtouchmove计算下拉距离，bindtouchend判断并实现刷新方法。

我的自定义下拉组件（Taro框架）

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ，禁止页面滚动，同时页面内的列表滚动需要自己再优化调整；

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后，如果页面内存在需滚动区域使用scroll-view效果比view更加流畅；

不设定固定高度不会发生闪屏但是页面滚动非常不流畅；

4、使用官方提供的scroll-view自定义的动画时，当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后，将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题，可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条，由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题，当页面需要一个吸顶 *** 作时，即滑动距离超过阈值时导航条吸顶的功能，若scroll-view将整个页面包含就会出现Q5的问题，可能导致在ios内吸顶的导航栏无法显示，若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1）在页面未触发吸顶时禁止scroll-view模块下拉，触发后放开滚动，同时会导致无法下拉。

2）页面滚动触发，scroll-view模块可下拉，但是滚动区域无法滚动，且下拉动画只显示一次。

您好，要下载元宵节动画片，首先需要打开微信，然后点击右上角的“搜索”按钮，在搜索框中输入“元宵节动画片”，点击“搜索”按钮，就可以在搜索结果中找到相关的动画片，点击动画片，就可以下载到您的手机中。如果您想要更多的动画片，可以点击右下角的“更多”按钮，就可以看到更多的动画片，然后按照上述步骤进行下载即可。

（1）激萌

激萌是一款类似于美颜相机的拍摄软件，其出彩之处就在于上面汇聚了全网超火的贴纸，以及其个性美颜的功能。激萌上面的美颜滤镜不仅可以美化面部，还可以一键美体。并如果想用激萌来拍摄微信视频的话，那可以使用其短视频片段模板，帮助小白迅速上手。尽管激萌上面有两千多种动态贴纸，但是有的在当下的短视频风潮中还是有些过时

（2）秒剪

这是一款微信官方出品的视频制作app，具有AI智能剪辑的功能。只需要我们将素材导入，不需要 *** 作就能帮助我们自动剪辑包装。秒剪上面的滤镜以及转场特效也比较丰富，其视频制作的比例是比较适合于微信视频制作的，制作完成后可以直接在平台上分享，省时省力。但同样这款软件只适用于微信视频号，对其它的短视频平台不太友好。

（3）秀展网

秀展网是一个网页平台，但是也可以完成微信视频制作。秀展网有着和前两款软件类似的功能，但是其素材以及模板却要比前两款软件更加丰富新潮。并且秀展网的优势之处在于动画制作，博主们可以使用秀展网制作比较新颖的动画视频开头。秀展网支持导出的格式也比较多样，完全不必担心导入微信平台会被压缩像素。

用于2d平移的变换函数，其将y轴上的元素移动给定值。请注意，y轴垂直向下增加：正长度向下移动元素，而负长度向上移动元素。

translateY（<translation-value>）

横跨y轴平移的值。可以是 长度 或 百分比 值。

例子

该示例显示了三个div元素，这些元素使用translateY（）函数单独转换。

wxml

wxss

wxjs

分析： bottom-dialog-body 设置高度为300 left ， right ， bottom 都为0 开始赋值的 transform 属性为高度的100%（即：高度）用 anmation 改变 translateY 为0，设置成原来的 bottom

这个动画，都是相对于设置的 bottom 来的，但是位置是从第一次 translate 以后的位置，开始动画， 这边就第一次的 translate 和第二次的 translate 都是并列的，第一次 translate 相对于 bottom 那第二次的 translate 也是相对于 bottom

注意： 在 js 文件中， animation 调用 translateY(300) 这个单位是 px 不是 rpx 一定要特别注意

以上就是关于微信小程序：关于下拉刷新PullDownRefresh全部的内容，包括:微信小程序：关于下拉刷新PullDownRefresh、[wx]微信小程序自定义下拉刷新、微信如何能下载元宵节动画片等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！