在scroll-view 标签上新增 refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered" 1. 2. 3. js中新增 // 控制下拉刷新动画的显隐 const isTriggered = ref(false) // 自定义下拉刷新被触发 const onRefresherrefresh = async () => { // 开启下拉刷新动画 isTriggered...
refresher-triggered属性定义为为false 在刷新请求前定义为 true,执行完刷新操作后再改成false
首先,你需要在scroll-view组件上设置refresher-enabled属性为true,以开启自定义下拉刷新功能。 2. 设置相关属性和事件 refresher-threshold:设置下拉刷新的触发阈值,单位为px。 refresher-triggered:控制下拉刷新是否被触发,需要在事件处理中动态改变此值。 @refresherpulling:自定义下拉刷新控件被下拉时触发。 @refresherrefr...
使用自定义下拉刷新@refresherrefresh,一定要配合:refresher-triggered="triggered"使用, 触发下拉刷新时,置为true,刷新结束时,置为false 不然刷新动画不会结束
</scroll-view> 1. 2. 3. 4. 5. 需要注意的是 scroll-view一定要给固定高度 根据自己的需求进行计算得到即可 js部分的代码 data(){ return{ scrollTop: 0, isEnd: false, triggered: false, isfreshing: false, isShowList: true, } },
下拉刷新 在scroll-view 标签上新增 refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered" // 控制下拉刷新动画的显隐 const isTriggered = ref(false) // 自定义下拉刷新被触发 const onRefresherrefresh = async () => { // 开启下拉刷新动画 isTriggered.value = tru...
但是,scroll-view相对不稳定,偶尔会出现下拉不刷新的情况,同时scroll-view不适合放长列表,有性能问题。 三、使用mescroll-nui下拉刷新 mescroll-nui是一个精致的下拉刷新和上拉加载js框架,可以用来实现下拉刷新。使用mescroll-nui下拉刷新的优点是刷新的样式可以自定义,同时支持多种下拉刷新的样式和动画效果。此外,...
一、scroll-view 下拉刷新 scroll-view用的页面中不能设置"enablePullDownRefresh": true,onPullDownRefresh()方法也会失效。 可以设置scroll-view的自定义刷新事件: scroll-view标签添加: <scroll-viewclass="scroll"id="scrollview"scroll-y="true":scroll-into-view="scroll_id"refresher-enabled:refresher-trigger...
2.由于上一步中将triggered置为true,会再次触发onRefresh,故需再增加一个_freshing,表示是否正在执行刷新操作,在onRefresh中做判断,如_freshing为true,不执行刷新操作直接返回。 如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。 代码如下,和官方差不多,注意有关键的几个细节不同。
官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当scroll-view的滚动条滚动到顶部时, 使refresher-enabled为true, 其他条件为false。