Vue. js integrates the pull-up loading drop-down refresh instance tutorial in vux, vue. jsvux

Vue. js integrates the pull-up loading drop-down refresh instance tutorial in vux, vue. jsvux

Preface

Vux is a mobile page UI component library developed based on Vue and Weui. It was originally developed to meet the company's end form requirements, because the third-party questionnaire form system is ugly on the mobile phone (or the PC style is adapted to the size ). As a result, the form component was reconstructed with vue, and other common components were also developed.

Compared with React, Vue is preferred. In addition to the current few Community components, the peripheral build tools are still relatively complete (The author is also very diligent ).

I won't talk much about it below. Let's take a look at the detailed introduction.

First

Create a project

Use vue-cli to create a vue Project

To install vux, refer to: vux Quick Start

Configuration

Official Document address

After opening, you will see a paragraph

This component is no longer maintained or recommended. In most cases, this component is not required. We recommend that you use third-party related components.

I don't know why I don't want to maintain it. Obviously there are many requirements.

I didn't use the LoadMore component in the demo, and used the use-pullup and use-pulldown components that come with scroroller. below is my configuration

<! -- Height: I used x-header. In this document, the header height is 48px, so set it to-48 --> <scroller use-pullup: pullup-config = "pullupDefaultConfig" @ on-pullup-loading = "loadMore" use-pulldown: pulldown-config = "pulldownDefaultConfig" @ on-pulldown-loading = "refresh" lock-x ref = "scrollerBottom" height = "-48"> </scroller> <script> import {Scroller, XHeader} from 'vux 'const pulldowndefaconfig Config = {content: 'pull-down refresh ', height: 40, autoRefresh: false, downContent: 'pull-down refresh', upContent: 'refresh after release ', loadingContent: 'refreshing... ', clsPrefix: 'xs-plugin-pulldown-'} const pullupdefaconfig Config = {content: 'pull more', pullUpHeight: 60, height: 40, autoRefresh: false, downContent: 'Load after release', upContent: 'pull up to load more', loadingContent: 'loading... ', clsPrefix: 'xs-plugin-pullup-'} export default {components: {XHeader, Scroller}, mounted () {this. $ nextTick () => {this. $ refs. scrollerBottom. reset ({top: 0})}, data () {return {list: [], pullupDefaultConfig: pullupDefaultConfig, pulldownDefaultConfig: pulldowndefaconfig config}, methods: {refresh () {}, loadMore () {}}</script>

Request interface to traverse data

The interface service uses data generated by mock. js. You can read this article: Use mock. js for random data and use express to output json interfaces.

Install axios

yarn add axios

//... methods: { fetchData(cb) {  axios.get('http://localhost:3000/').then(response => {  this.$nextTick(() => {   this.$refs.scrollerBottom.reset()  })  cb(response.data)  }) } }//...

Improved refresh and loadMore Methods

//... methods: { refresh() {  this.fetchData(data => {  this.list = data.list  this.$refs.scrollerBottom.enablePullup()  this.$refs.scrollerBottom.donePulldown()  }) }, loadMore() {  this.fetchData(data => {  if (this.list.length >= 10) {   this.$refs.scrollerBottom.disablePullup()  }  this.list = this.list.concat(data.list)  this.$refs.scrollerBottom.donePullup()  }) } }//...

Call the loadMore method when the component is loaded.

//... mounted() { this.$nextTick(() => {  this.$refs.scrollerBottom.reset({top: 0}) }) this.loadMore() }//...

Finally, complete the html part.

<scroller> <div style="padding: 10px 0"> <div class="box" v-for="(item, index) in list" :key="index">  <p class="list"></p> </div> </div></scroller>

Complete code

<Template> <div> <x-header: left-options = "{'showback': false}"> pull and load, pull down and refresh </x-header> <scroller use-pullup: pullup-config = "pullupDefaultConfig" @ on-pullup-loading = "loadMore" use-pulldown: pulldown-config = "pulldownDefaultConfig" @ on-pulldown-loading = "refresh" lock-x ref = "scrollerBottom" height = "-48"> <div style = "padding: 10 p x 0 "> <div class =" box "v-for =" (item, index) in list ": key = "index"> <p class = "list"> </p> </div> </scroller> </div> </template> <script> import {Scroller, XHeader} from 'vux 'import axios from 'axios 'const pulldowndefaconfig Config = {content: 'pull-down refresh', height: 40, autoRefresh: false, downContent: 'pull-down refresh ', upContent: 'refresh after release', loadingContent: 'refreshing... ', clsPrefix: 'xs-plugin-pulldown-'} const pullupdefaconfig Config = {content: 'pull more', pullUpHeight: 60, height: 40, autoRefresh: false, downContent: 'Load after release', upContent: 'pull up to load more', loadingContent: 'loading... ', clsPrefix: 'xs-plugin-pullup-'} export default {components: {XHeader, Scroller}, mounted () {this. $ nextTick () => {this. $ refs. scrollerBottom. reset ({top: 0}) this. loadMore ()}, data () {return {list: [], pullupdefaconfig config: pullupDefaultConfig, pulldowndefaconfig config: pulldowndefaconfig config}, methods: {fetchData (cb) {axios. get ('HTTP: // localhost: 3000 /'). then (response => {this. $ nextTick () => {this. $ refs. scrollerBottom. reset ()}) cb (response. data)}, refresh () {this. fetchData (data => {this. list = data. list this. $ refs. scrollerBottom. enablePullup () this. $ refs. scrollerBottom. donePulldown ()}, loadMore () {this. fetchData (data => {if (this. list. length> = 10) {this. $ refs. scrollerBottom. disablePullup ()} this. list = this. list. concat (data. list) this. $ refs. scrollerBottom. donePullup ()}) }}</script> <style lang = "less">. box {padding: 5px 10px 5px 10px; &: first-child {padding: 0 10px 5px 10px ;}&: last-child {padding: 5px 10px 0 10px ;}}. list {background-color: # fff; border-radius: 4px; border: 1px solid # f0f0f0; padding: 30px ;}. xs-plugin-pulldown-container {line-height: 40px ;}. xs-plugin-pullup-container {line-height: 40px ;}</style>

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.