지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Vue 프레임워크 vux 컴포넌트 라이브러리 기반 풀업 새로 고침 기능 소개

Vue 프레임워크 vux 컴포넌트 라이브러리 기반 풀업 새로 고침 기능 소개

不言
풀어 주다： 2018-06-29 16:16:52
원래의
1734명이 탐색했습니다.

이 글에서는 주로 Vue 프레임워크 vux 컴포넌트 라이브러리를 기반으로 한 풀업 및 새로 고침 기능을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

최근 회사에서 앱을 개발 중이어서 사용하기로 결정했습니다. Vue 프레임워크는 이제 풀업 새로 고침 기능을 구현할 때 발생하는 함정을 요약합니다:
1. 문제: 한 번만 새로 고침, 해결 방법: 수동으로 상태를 재설정해야 함
this.scrollerStatus.pullupStatus = 'default' ,
2. 문제: 스크롤할 수 없습니다. 해결책: 연결 유지 캐싱이 활성화되어 있으므로 

activated () {
 this.$refs.scroller.reset()
}
로그인 후 복사

을 설정해야 합니다. 그래도 작동하지 않으면 배경 데이터를 얻은 후 다음 코드를 실행하세요. 

this.$nxtTick(() => {
    this.$refs.scroller.reset()
   })
로그인 후 복사

전체 페이지 코드를 게시하세요. 


<template> 
  <p style="height:100%;">

    <x-header slot="header" :left-options="{showBack: false}" >会议列表 
    <a slot="right" v-on:click="show = true" > <icon type="search"></icon> </button> </a> 
    </x-header>

    <!-- 会议列表 -->
    <scroller v-model="scrollerStatus" height="-46"  lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" >
    <p class="box2">
      <p v-for="list, index in lists">  
         <router-link :to="{ path: list.id } ">
           <p style="height:40px;"> 
            <span class="spanMeetTitle" v-html=&#39;(index+1) + " . " + list.name&#39; ></span>
            <span class="spanMeetStatu" v-html=&#39;list.status&#39;></span>
           </p> 
          <p class="prevSuper">
           <form-preview header-label="" header-value="" :bodyItems="list" :footer-buttons="buttons1"></form-preview>
          </p>
          </router-link>  
          <hr>  
       </p> 
    </p>
    </scroller>

   <!-- 导航 -->
   <Home></Home>

   <!-- 搜索 --> 
   <popup v-model="show" @on-hide="log(&#39;hide&#39;)" @on-show="log(&#39;show&#39;)" height="93%">
   <p class="popup0">
    <group> 
     <x-input v-model=&#39;meetName&#39; placeholder="请输入“会议名称”搜索"></x-input> 
     <p style="float:left;margin-top: -36px;"><icon type="search"></icon></p> 
    </group>
 <!--  
    <group> 
     <checklist :max=1 title="会议审批状态" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist> 
    </group> -->

     <group title="会议审批状态">
     <radio :options="commonList" v-model="checkStatus" @on-change="change"></radio>
    </group>

    <group title="会议类型">
      <selector placeholder="请选择会议类型" v-model="checkType" :options="meetType"></selector>
    </group>

     <group title="召开时间">
     <flexbox>
      <flexbox-item>
      <p class="flex-demo" style="background-color:white;color:black;height:45px"> 
       <datetime title=&#39;&#39; placeholder="请选择" v-model="startTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
      </p>
      </flexbox-item>
      至
      <flexbox-item>
      <p class="flex-demo" style="background-color:white;color:black;height:45px">
       <datetime title=&#39;&#39; placeholder="请选择" v-model="stopTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
      </p>
      </flexbox-item>
     </flexbox> 
    </group>
    <br>
    <flexbox orient="vertical">
     <flexbox-item><p class="flex-demo" v-on:click="toSearch" >确定</p></flexbox-item>
     <flexbox-item><p class="flex-demo" v-on:click="show = false" style="background-color:white;color:black">取消</p></flexbox-item>
    </flexbox>

   </p>
  </popup>

  <toast v-model="showToast">已加载全部数据</toast>

  <loading v-model="isShowLoading" :text="textLoading"></loading>

  <alert v-model="isShowAlert" :title="AlertCongratulations" > {{ alertMessage }}</alert>
  </p>
</template>

<style type="text/css">
 .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;
 }
</style>

<script>
import { XHeader, Group, FormPreview, Tabbar, TabbarItem, Scroller, Icon, Popup, XSwitch, Toast, XInput, Checklist, Datetime, Flexbox, FlexboxItem, Selector, Loading, Alert, Radio } from &#39;vux&#39;
import Home from &#39;./Home&#39;

export default {
 components: {
  XHeader,
  Home,
  Group,
  FormPreview,
  Tabbar,
  TabbarItem,
  Scroller,
  Icon,
  Popup,
  XSwitch,
  Toast,
  XInput,
  Checklist,
  Datetime,
  Flexbox,
  FlexboxItem,
  Selector,
  Loading,
  Alert,
  Radio
 },
 data () {
  return {
   type: &#39;1&#39;,
   PageIndex: 0,
   show: false,
   showToast: false,
   showloading: false,
   showUp: true,
   isbounce: false,
   isShowAlert: false,
   AlertCongratulations: &#39;条件有误&#39;,
   textloading: &#39;加载中&#39;,
   alertMessage: &#39;‘召开时间&#39; 不能大于 ‘结束时间&#39;&#39;,
   value: &#39;&#39;,
   meetName: &#39;&#39;,
   startTime: &#39;&#39;,
   stopTime: &#39;&#39;,
   meetType: [],
   commonList: [{key: &#39;20&#39;, value: &#39;审批中&#39;}, {key: &#39;50&#39;, value: &#39;审批通过&#39;}, {key: &#39;&#39;, value: &#39;全部&#39;}],
   checkStatus: &#39;&#39;,
   checkType: &#39;&#39;,
   commonList2: [],
   results: [],
   lists: [[]],
   buttons1: [{
    style: &#39;primary&#39;,
    text: &#39;查看更多&#39;,
    link: &#39;/Message&#39;
   }],
   upobj: {
    content: &#39;请上拉刷新数据&#39;,
    pullUpHeight: 60,
    height: 40,
    autoRefresh: false,
    downContent: &#39;请上拉刷新数据&#39;,
    upContent: &#39;请上拉刷新数据&#39;,
    loadingContent: &#39;加载中...&#39;,
    clsPrefix: &#39;xs-plugin-pullup-&#39;
   },
   isShowLoading: false,
   textLoading: &#39;加载中&#39;,
   scrollerStatus: {
    pullupStatus: &#39;default&#39;
   }
  }
 },
 mounted () {
  console.log(this.scrollerStatus.pullupStatus)
  this.getMeetList(true)
  this.getMeetType()
  this.$nextTick(() => {
   this.$refs.scroller.reset()
  })
 },
 methods: {
  log (str) {
   console.log(str)
  },
  getMeetList (isEmpty) {
   var APPROVE_STATUS = this.checkStatus
   var MEETING_TYPE = this.checkType
   this.isShowLoading = true
   this.$http.post(global.httpsUrl + &#39;/Meet/GetMeetList&#39;, {&#39;HumanId&#39;: global.userid, &#39;KEY&#39;: this.meetName, &#39;APPROVE_STATUS&#39;: APPROVE_STATUS, &#39;MEETING_TYPE&#39;: MEETING_TYPE, &#39;START_DATE&#39;: this.startTime, &#39;STOP_DATE&#39;: this.stopTime, &#39;PageIndex&#39;: this.PageIndex, &#39;PageSize&#39;: &#39;2&#39;}).then(response => {
   // sucess callback
    console.log(&#39;111&#39;)
    var data = response.body.Data
    if (isEmpty) {
     this.lists = []
     this.show = false
    } else {
     if (data && data.length === 0) {
      this.showToast = true
      this.isShowLoading = false
      this.scrollerStatus.pullupStatus = &#39;disabled&#39; // 禁用下拉
      return
     }
    }
    for (var i = 0; i < data.length; i++) {
     if (data[i].APPROVE_STATUS < 20) {
      break
     }
     var personName = data[i].PERSION1_NAME
     if (personName && personName.length > 0) {
      personName = personName.substring(0, personName.indexOf(&#39;>&#39;))
     }
     var meetlist = []
     var obj = {
      label: &#39;地点&#39;,
      value: data[i].ADDRESS
     }
     meetlist.push(obj)
     obj = {
      label: &#39;主持人&#39;,
      value: personName
     }
     meetlist.push(obj)
     obj = {
      label: &#39;召开时间&#39;,
      value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, &#39;yyyy-MM-dd HH:mm&#39;)
     }
     meetlist.push(obj)
     obj = {
      label: &#39;会议类型&#39;,
      value: data[i].MEETING_TYPE_NAME
     }
     meetlist.push(obj)
     meetlist.id = &#39;FromMeet/&#39; + data[i].MEETING_MINUTES_GUID + &#39;/123&#39;
     meetlist.name = data[i].MEETING_NAME
     var vstatus = &#39;审批中&#39;
     if (data[i].APPROVE_STATUS === 50) {
      vstatus = &#39;审批通过&#39;
     }
     meetlist.status = vstatus
     this.lists.push(meetlist)
    }
    this.isShowLoading = false
    if (!isEmpty) {
     this.scrollerStatus.pullupStatus = &#39;default&#39;
     // this.$refs.scroller.reset()
     console.log(this.scrollerStatus.pullupStatus)
     this.$nextTick(() => {
      this.$refs.scroller.reset()
     })
    }
   }, response => {
   // error callback
    this.show = false
   })
  },
  showSearch () {
   this.show = true
  },
  change (val) {
   console.log(&#39;change&#39;, val)
   console.log(this.startTime)
  },
  change2 (val) {
   console.log(&#39;change&#39;, val)
  },
  resultClick () {
  },
  getResult () {
  },
  toSearch () {
   console.log(2222)
   if (this.startTime && this.stopTime && this.startTime > this.stopTime) {
    this.isShowAlert = true
   } else {
    this.PageIndex = 0
    this.getMeetList(true)
   }
  },
  selPullUp () {
   console.log(&#39;上拉刷新数据&#39;)
   this.PageIndex++
   this.getMeetList(false)
  },
  getMeetType () {
   this.$http.post(global.httpsUrl + &#39;/Meet/GetMeetType&#39;).then(response => {
    // sucess callback
    var data = response.body.Data
    for (var i = data.length - 1; i >= 0; i--) {
     var obj = {
      key: data[i].TYPE_GUID,
      value: data[i].TYPE_NAME
     }
     this.meetType.push(obj)
    }
   }, response => {
   // error callback
   })
  }
 },
 activated () {
  this.$refs.scroller.reset()
 }
}
</script>

 <style lang="less">
@import &#39;~vux/src/styles/1px.less&#39;;

.flex-demo {
 text-align: center;
 color: #fff;
 background-color: #20b907;
 border-radius: 4px;
 background-clip: padding-box;
}
</style>
로그인 후 복사

이상이 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

vue가 새로 고침 없이 앞으로 새로 고침과 뒤로의 효과를 달성하는 방법


vue2.0 풀다운 새로 고침 및 풀업 로딩의 모바일 구현에 대한 추가 예


위 내용은 Vue 프레임워크 vux 컴포넌트 라이브러리 기반 풀업 새로 고침 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue
원천：php.cn
이전 기사：Vue2 SSR이 API 데이터를 캐싱하는 방법에 대해 다음 기사：vue-cli에서 스타일러스를 사용할 수 없는 문제를 해결하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿