github地址组件地址
微信小程序 wepyjs 基于scroll-view 下拉刷新
说明
官方scroll-view组件不支持下拉刷新,只有滚到顶部刷新的机制,所以做一个基于scroll-view的下拉刷新组件。
使用
安装组件
npm i wepy-scroll-view-refresh --save-dev
使用提示
1、该组件外面必须套用scroll-y的scroll-view(暂时不支持横向滚动)2、scroll-view必须使用scroll事件实时向该组件传递一个scrollTop(scroll-view的scrollTop)参数3、内容区域用卡槽slot="refresh-content"部分填充4、组件刷新会触发refresh事件,父页面需要在events内接收一个refresh的事件5、重置刷新组件调用this.$invoke('refresh', 'reset')方法
使用示例
// index.wpy<template> <view class="kai-content"> <scroll-view scroll-y="{{true}}" class="refresh-scroll__container" scroll-with-animation="{{true}}" bindscrolltolower="lower" style="width: 100vw;height:100vh;" catchscroll="scroll"> <view style="width:100%;height:100%;"> <refresh :scrollTop.sync="scrollTop"> <view slot="refresh-content" style="margin-top:45px;"> <repeat for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" index="i" item="item" key="new-{{i}}"> <view class="new-block"> {{i}} </view> </repeat> </view> </refresh> </view> </scroll-view></view></template><script>import wepy from 'wepy'import Refresh from 'wepy-scroll-view-refresh'export default class ScrollViewRefresh extends wepy.page { components = { refresh: Refresh } data = { scrollTop: 0 } methods = { lower (index) { console.log(index) }, scroll (e) { this.scrollTop = e.detail.scrollTop this.$apply() } } events = { 'refresh': (data) => { setTimeout(() => { this.$invoke('refresh', 'reset') }, 3000) } } }</script>
刷新重制方法
this.$invoke('refresh', 'reset')
楼主我想请问下,我使用了你这个插件然后头部设置了tab,然后内容区域下拉刷新得时候会卡顿一下才会拉下来是怎么回事啊,在开发工具没有问题得,手机才会。
不会超过2m
@iTouch 他这个是调用了Page的下拉刷新,然后设置了刷新的颜色和底色一样就看不出来了
你看下 有车以后 这个小程序,我感觉他们是直接调用原生的下拉刷新API接口。但是却实现了头部tab 的固定,感觉体验非常好不知道是怎么实现的,你知道吗?
position: fixed ?
欢迎大家使用,有问题也可以反馈给我