vue.js モバイル ターミナルはプルアップ ロードとプルダウン リフレッシュを実装します

今回は、vue.js モバイル ターミナルでプルアップ、ロード、プルダウンを実装してリフレッシュするための 注意事項 について説明します。プルダウンの更新を次に示します。実際のケースを見てみましょう。

水平スクロールと同様に、実装には引き続き better-scroll ライブラリを使用します。 better が新しいバージョンにアップデートされたので、以前はバージョン 0.7 でしたが、アップデート後、バージョン 1.2.6 になり、さらに新しいバージョンがあることがわかりました。 比較的使いやすい API なので、以前のコードも書き直し、新しい API を使用してプルアップ ロードとプルダウン リフレッシュを実装しました。

最初に基本的なスタイルを作成しますが、ここでは省略します。次に、ベタースクロール ライブラリを導入します

import BScroll from 'better-scroll'

次に、マウントされたライフサイクルでスクロールをインスタンス化するとき、データを取得してからnewすることも、最初にnewしてからデータを取得した後にrefreshを呼び出すこともできます。

インスタンス中に設定パラメータを渡す必要があるため、詳細についてはドキュメントを参照してください。重要な点は 2 つだけです:

//是否开启下拉刷新，可传入true或者false,如果需要更多配置可以传入一个对象
pullDownRefresh：{
  threshold:80,
  stop:40
}
//是否开启上拉加载，同上，上拉无stop参数，这里需要注意是负数
pullUpLoad：{
  threshold:-80,
}
/**
 * 
 * @param threshold 触发事件的阀值，即滑动多少距离触发
 * @param stop 下拉刷新后回滚距离顶部的距离（为了给loading留出一点空间）
 */

個人的には上記の数字の方が適切だと感じますが、適応に Taobaoflexible.js を使用しているため、Android では距離 80 が適切ですが、iPhone 6s ではスケール 3 であるため、ここで問題が発生します。現在の 80 は、iPhone 6s では約 27 です。

したがって、ズーム レベルが異なる画面では、対応するズーム率を乗算する必要があります。

実際、Taobaoflexible.js には画面のズーム率を取得するこのメソッドがすでにあり、ここで直接取得できます:

//在util.js里面加一个方法
export function getDeviceRatio(){
  var isAndroid = window.navigator.appVersion.match(/android/gi);
  var isIPhone = window.navigator.appVersion.match(/iphone/gi);
  var devicePixelRatio = window.devicePixelRatio;
  var dpr;
  if (isIPhone) {
    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3) {        
      dpr = 3;
    } else if (devicePixelRatio >= 2){
      dpr = 2;
    } else {
      dpr = 1;
    }
  } else {
    // 其他设备下，仍旧使用1倍的方案
    dpr = 1;
  }
  return dpr
}

import{ DEVICE_RATIO} from '../base/js/api.js'
/*获取当前缩放比*/
const DEVICE_RATIO=getDeviceRatio();
 /*下拉配置*/
const DOWN_CONFIG={
 threshold:80*DEVICE_RATIO,
 stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
 threshold:-80*DEVICE_RATIO,
}
this.scroller = new BScroll(scrollWrap,{
 click:true,
 probeType:3,
 pullDownRefresh:DOWN_CONFIG,
 pullUpLoad:UP_CONFIG
});

インスタンス化後の次のステップは、プルアップ イベントとプルダウン イベントをリッスンすることです。 betterScroll はいくつかの新しいイベントを追加しました。主なイベントは次のとおりです:

/*下拉事件*/
this.scroller.on('pullingDown',()=> {});
/*上拉事件*/
this.scroller.on('pullingUp',()=>{});

プルアップまたはプルダウン イベントをトリガーした後、this.scroller.finishPullDown() または this.scroller.finishPullUp() を呼び出して、より良いスクロール イベントが完了したことを通知する必要があります。

一般的なプロセスは次のとおりです:

this.scroller.on('pullingDown',()=> {
  
  <!-- 1. 发送请求获取数据 -->
  
  <!-- 2. 获取成功后，通知事件完成 -->
  
  <!-- 3. 修改data数据，在nextTick调用refresh -->
});

通常、操作が完了した後、手動で更新メソッドをトリガーしてスクロール可能な距離を再計算する必要があります。これにより、データの変更を監視するウォッチを作成できるため、データを変更するだけで済み、メソッドを呼び出す必要がなくなります。データ操作後に毎回更新メソッドを実行します。

りー

使用しているバージョンがまだ古い場合は、on(scroll)イベント中に判断して関数を実装することができます

watch:{
 dataList(){
  this.$nextTick(()=>{
   this.scroller.refresh(); 
  }) 
 }
},

複数のトリガーを防ぐには、2 つのスイッチを追加する必要があります;

this.scroller.on("scroll",(pos)=>{ 
  //获取整个滚动列表的高度
  var height=getStyle(scroller,"height");
  //获取滚动外层wrap的高度
  var pageHeight=getStyle(scrollWrap,"height");
  //触发事件需要的阀值
  var distance=80*DEVICE_RATIO;
  //参数pos为当前位置
  if(pos.y>distance){ 
    //console.log("下拉");
    //do something
   
  }else if(pos.y-pageHeight<-height-distance){
    //console.log("上拉");
    //do something
  }

イベントがトリガーされるたびに、対応するスイッチを false に設定し、操作の完了後に true にリセットします。そうしないと、複数のプルダウンまたはプルアップによって複数のイベントがトリガーされます。スイッチを設定すると、一度に 1 つのイベントのみが実行されるようになります。

最後に、コンポーネントにパッケージ化します

var onPullUp=true;
var onPullDown=true;

スクロールする必要がある具体的なコンテンツはページごとに異なるため、それを配信するためにスロットが使用されます。

コンポーネントに必要なパラメータは親から渡され、デフォルト値は prop

 <template>
  <p ref="wrapper" class="list-wrapper"> 
    <p class="scroll-content">    
      <slot></slot>     
    </p>   
  </p>
</template>

を通じて受け取って設定されます コンポーネントがマウントされた後、イベントがトリガーされたときにイベントを直接処理するのではなく、親はテンプレート v-on を通じてイベントを受け取り、後続のロジックを処理します

 export default {
  props: {
   dataList:{
    type: Array,
    default: []
   },
   probeType: {
    type: Number,
    default: 3
   },
   click: {
    type: Boolean,
    default: true
   },  
   pullDownRefresh: {
    type: null,
    default: false
   },
   pullUpLoad: {
    type: null,
    default: false
   },  
  }

。 親コンポーネントを使用する場合は、構成パラメーター Props を渡して、子コンポーネントによって発行されたイベントを処理し、スロット タグを特定のコンテンツに置き換える必要があります

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: this.probeType,
      click: this.click,    
      pullDownRefresh: this.pullDownRefresh,
      pullUpLoad: this.pullUpLoad,
    })
  this.scroll.on('pullingUp',()=> {
    if(this.continuePullUp){
      this.beforePullUp();
      this.$emit("onPullUp","当前状态：上拉加载");
    }
  });
  this.scroll.on('pullingDown',()=> {
    this.beforePullDown();
    this.$emit("onPullDown","当前状态：下拉加载更多");
  }); 
}

親コンポーネントは this.$refs.xxx を通じて子コンポーネントを取得し、子コンポーネントのメソッドを呼び出すことができます。 完全なスクローラー コンポーネントの内容は次のとおりです

  <Scroller 
    id="scroll"
    ref="scroll" 
    :dataList="filmList"
    :pullDownRefresh="DOWN_CONFIG"
    :pullUpLoad="UP_CONFIG"
    @onPullUp="pullUpHandle"
    @onPullDown="pullDownHandle"
   >
    <ul>
       <router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to=&#39;{path:"/film-detail/"+v.id}&#39;>
          <p class="film-listimg">
             <img v-lazy="v.images.small" alt="" />        
          </p>
          <p class="film-listdetail">
            <p class="film-listdetailtitle">{{v.title}}</p>
            <p class="film-listdetaildirector">导演：{{filterDirectors(v.directors)}}</p>
            <p class="film-listdetailyear">年份：{{v.year}}<span>{{v.stock}}</span></p>
            <p class="film-listdetailtype">类别：{{v.genres.join(" / ")}}<span></span></p>
            <p class="film-listdetailrank">评分：<span>{{v.rating.average}}分</span></p>
          </p>             
        </router-link>
     </ul>     
   </Scroller>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がvue.js モバイル ターミナルはプルアップ ロードとプルダウン リフレッシュを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。