使用vux实现上拉刷新功能遇到的坑

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑：

1.问题：只刷新一次，解决方法：需要自己手动重置状态

 this.scrollerStatus.pullupStatus = ‘default'， 

2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置

 activated () { this.$refs.scroller.reset() }

如果还没效果，请在获取后台数据后，执行如下代码

 this.$nxtTick(() => { this.$refs.scroller.reset() })

贴出整个页面的代码。

   会议列表    
  
 
 
   <!--    -->       至   
 确定取消已加载全部数据 {{ alertMessage }} .weui-form-preview__value{ font-size: 1.1em !important; color: black; } .spanMeetTitle{ float: left; border-radius: 13px; padding:10px 6px; font-size: 15px; font-weight: bold; margin-left: 3px; color: black; } .spanMeetStatu{ float: right; background-color: green; border-radius: 10px; padding:6px 5px; color: white; font-size: 13px; margin-top: 5px; } .flex-demo{ height: 30px;padding-top: 5px; } .selected{ color: blue !important; background-color: transparent; } .popup0 { padding-bottom:15px; height:200px; } .popup1 { width:100%; height:100%; } .popup2 { padding-bottom:15px; height:400px; } .box1 { height: 100px; position: relative; width: 1490px; } .box1-item { width: 200px; height: 100px; background-color: #ccc; display:inline-block; margin-left: 15px; float: left; text-align: center; line-height: 100px; } .box1-item:first-child { margin-left: 0; } .box2-wrap { height: 300px; overflow: hidden; }  @import '~vux/src/styles/1px.less'; .flex-demo { text-align: center; color: #fff; background-color: #20b907; border-radius: 4px; background-clip: padding-box; } 

总结

以上所述是小编给大家介绍的使用vux实现上拉刷新功能遇到的坑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

以上就是使用vux实现上拉刷新功能遇到的坑的详细内容，更多请关注本站其它相关文章！