집 > 기사 > 웹 프론트엔드 > 풀업 로딩 및 풀다운 새로 고침을 구현하기 위해 vue.js에 vux를 통합하는 방법

풀업 로딩 및 풀다운 새로 고침을 구현하기 위해 vue.js에 vux를 통합하는 방법

亚连원래의: 2018-06-12 18:08:122464검색

이 글은 vux에서 풀업 로딩과 풀다운 새로고침을 통합한 vue.js에 대한 관련 정보를 주로 소개합니다. 이 글은 모든 사람의 공부나 업무에 대한 확실한 참고 학습 가치를 가지고 있습니다. 누가 필요해요? 같이 공부해요.

머리말

Vux는 Vue와 Weui를 기반으로 개발된 모바일 페이지 UI 컴포넌트 라이브러리입니다. 원래 개발 의도는 회사의 WeChat 양식 요구 사항을 충족하는 것입니다. 왜냐하면 타사 설문지 양식 시스템이 정말 엉망이기 때문입니다. 휴대폰(그냥 크기에 맞춰진 PC 스타일일 뿐입니다.) 그래서 vue를 사용하여 양식 구성 요소를 다시 만든 다음 일반적으로 사용되는 다른 구성 요소도 개발했습니다.

저는 여전히 React보다 Vue를 선호합니다. 현재 커뮤니티 구성 요소가 많지 않다는 점 외에도 주변 구축 도구가 비교적 완벽합니다(저자도 매우 부지런합니다).

아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

위의 첫 번째 그림

프로젝트 만들기

vue-cli를 사용하여 vue 프로젝트 만들기

vux 설치, 다음을 참조하세요: vux 빠른 시작

구성

공식 문서 주소를 열면

문단이 보입니다

이 컴포넌트는 더 이상 유지 관리되지 않으며 대부분의 경우 이 컴포넌트를 사용할 필요가 없습니다. 타사 관련 구성요소 사용을 권장하며, 관련 문제는 처리되지 않습니다.

저자가 왜 유지관리를 안하는지 모르겠네요. 확실히 수요가 많네요

데모에서는 LoadMore 컴포넌트를 사용하지 않았는데, 함께 제공되는 use-pullup과 use-pulldown을 사용했습니다. 내 구성은 다음과 같습니다

<!-- 
 height: 我用到x-header了，文档里说header高是48px,所以这里设置成-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 &#39;vux&#39;
 const pulldownDefaultConfig = {
 content: &#39;下拉刷新&#39;,
 height: 40,
 autoRefresh: false,
 downContent: &#39;下拉刷新&#39;,
 upContent: &#39;释放后刷新&#39;,
 loadingContent: &#39;正在刷新...&#39;,
 clsPrefix: &#39;xs-plugin-pulldown-&#39;
 }
 const pullupDefaultConfig = {
 content: &#39;上拉加载更多&#39;,
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: &#39;释放后加载&#39;,
 upContent: &#39;上拉加载更多&#39;,
 loadingContent: &#39;加载中...&#39;,
 clsPrefix: &#39;xs-plugin-pullup-&#39;
 }
 export default {
 components: {
 XHeader,
 Scroller
 },
 mounted() {
 this.$nextTick(() => {
 this.$refs.scrollerBottom.reset({top: 0})
 })
 },
 data() {
 return {
 list: [],
 pullupDefaultConfig: pullupDefaultConfig,
 pulldownDefaultConfig: pulldownDefaultConfig
 }
 },
 methods: {
 refresh() { 
 },
 loadMore() {
 
 }
 }
 }
</script>

요청 인터페이스는 데이터를 통과합니다

인터페이스 서비스는 mock.js에서 생성된 데이터를 사용합니다: mock.js 임의 데이터 사용 및 json 출력에 express 사용 인터페이스

axios 설치

yarn add axios

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

새로 고침 및 loadMore 메서드 개선

//...
 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()
  })
 }
 }
//...

구성 요소가 로드될 때 loadMore 메서드 호출

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

마지막으로 HTML 부분 완성

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

완전한 코드

<template>
 <p>
 <x-header :left-options="{&#39;showBack&#39;: false}">上拉加载，下拉刷新</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">
  <p style="padding: 10px 0">
  <p class="box" v-for="(item, index) in list" :key="index">
   <p class="list"></p>
  </p>
  </p>
 </scroller>
 </p>
</template>
<script>
 import {Scroller, XHeader} from &#39;vux&#39;
 import axios from &#39;axios&#39;

 const pulldownDefaultConfig = {
 content: &#39;下拉刷新&#39;,
 height: 40,
 autoRefresh: false,
 downContent: &#39;下拉刷新&#39;,
 upContent: &#39;释放后刷新&#39;,
 loadingContent: &#39;正在刷新...&#39;,
 clsPrefix: &#39;xs-plugin-pulldown-&#39;
 }
 const pullupDefaultConfig = {
 content: &#39;上拉加载更多&#39;,
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: &#39;释放后加载&#39;,
 upContent: &#39;上拉加载更多&#39;,
 loadingContent: &#39;加载中...&#39;,
 clsPrefix: &#39;xs-plugin-pullup-&#39;
 }
 export default {
 components: {
  XHeader,
  Scroller
 },
 mounted() {
  this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
  })
  this.loadMore()
 },
 data() {
  return {
  list: [],
  pullupDefaultConfig: pullupDefaultConfig,
  pulldownDefaultConfig: pulldownDefaultConfig
  }
 },
 methods: {
  fetchData(cb) {
  axios.get(&#39;http://localhost:3000/&#39;).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>

The 위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다. 모두 도움이 되었습니다.

풀업 로딩 및 풀다운 새로 고침을 구현하기 위해 vue.js에 vux를 통합하는 방법

관련 기사