Vux is used to implement the pull-up and refresh function.

Vux is used to implement the pull-up and refresh function.

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> 
Summary
The above is a small series of difficulties in using vux to implement the pull and refresh function. I hope it will help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!