Based on the Vue framework, the vux Component Library implements the pull-up and refresh function, and vuevux

Based on the Vue framework, the vux Component Library implements the pull-up and refresh function, and vuevux

Recently, the company has been developing an app and selected a vux Component Library Based on the Vue framework. It summarizes the difficulties encountered in implementing the uppull and refresh functions:
1. Problem: refresh only once. Solution: manually reset the status.
This. scrollerStatus. pullupStatus = 'default ',
2. Problem: Do not scroll. Solution: Because keep-alive cache is enabled, you need to set

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

If not, run the following code after obtaining the background data:

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

Paste the code of the entire page.

<Template> <div styles = "height: 100%;"> <x-header slot = "header": left-options = "{showBack: false} "> meeting list <a slot =" right "v-on: click = "show = true"> <icon type = "search"> </icon> </button> </a> </x-header> <! -- Meeting list --> <scroller v-model = "scrollerStatus" height = "-46" lock-x scrollbar-y ref = "scroller": bounce = "isbounce ": use-pullup = "showUp ": pullup-config = "upobj" @ on-pullup-loading = "selPullUp"> <div class = "box2"> <p v-for = "list, index in lists "> <router-link: to =" {path: list. id} "> <p style =" height: 40px; "> <span class =" spanMeetTitle "v-html = '(index + 1) + ". "+ list. name'> </span> <span class = "spanMe EtStatu "v-html = 'list. status '> </span> </p> <p class = "prevSuper"> <form-preview header-label = "" header-value = "": bodyItems = "list ": footer-buttons = "buttons1"> </form-preview> </p> </router-link> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.