微信小程序 - 两种下拉刷新

一. 指定当前页面级实现下拉刷新

 1. 在当前页面的 json 文件配置：

{
    "usingComponents": {},
    "enablePullDownRefresh": true,
    "navigationBarTitleText": "视频中心",
}

 2. 在当前页面的 js文件配置：

onPullDownRefresh() {
    console.log("下拉刷新");
},

 二. 组件级下拉刷新

1. 给需要下拉的部分设置 refresher-enabled    开启下拉

2. 设置事件 bindrefresherrefresh="handleRefresh"    下拉触发事件

3. 下拉回弹 refresher-triggered  (不设置下拉不会回弹)

wxml 文件：

<scroll-view 
    class="videoScroll" 
    scroll-y 
    refresher-enabled
    bindrefresherrefresh="handleRefresh"
    refresher-triggered="({trigger}}"
>
    <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
        <!-- 光靠video组件模式是无法实现暂停上一个，播放下一个的操作功能 -->
        <video 
            src="{{item.data.urlInfo.url}}"
            object-fit="fill" 
            id="{{item.data.vid}}"
            poster="{{item.data.coverUrl}}"
            wx:if="{{videoId === item.data.vid}}"
        />
        <image 
            src="{{item.data.coverUrl}}"
            id="{{item.data.vid}}" 
            bindplay="handlePlay"
            wx:else
        />
    </view>
</scroll-view>

js文件：

handleRefresh() {
    this.setData({
        trigger: false,
    });
},