基于Swiper的Tab+Page滑动切换

基本用法

// js
const TabPage = require('rjs-swiper-tabpage')
require('rjs-swiper-tabpage/dist/style.css')

TabPage({
  slidesPerView: 2
});

// html
<div class="swiper-container swiper-tabpage-tabs">
  <div class="swiper-wrapper">
    <div class="swiper-slide active">手机短信登录</div>
    <div class="swiper-slide">帐号登录</div>
    <div class="bar">
      <div class="color"></div>
    </div>
  </div>
</div>
<div class="swiper-container swiper-tabpage-pages">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-tabpage-page">
      手机短信登录 - 内容
    </div>
    <div class="swiper-slide swiper-tabpage-page">
      帐号登录 - 内容
    </div>
  </div>
</div>

带PullLoad用法

// js
const TabPage = require('rjs-swiper-tabpage')
require('rjs-swiper-tabpage/dist/style.css')

const PullLoad = require('rjs-swiper-pullload/dist/style.css')
require('rjs-swiper-pullload/src/index.less')

TabPage({
  slidesPerView: 2
});

PullLoad({
  qName: '.swiper-pull',
  dataMethod: 'POST',
  pullDown: {auto: true},
  pullUp: true,
  dataUrl: '/api/...?type={type}&page={page}&size={size}',
  dataAjaxFn: Ajax,
  itemRenderFn: function (item, index) {
    return `item....`;
  }
}, {
  qName: '.swiper-pullhead',
});

// html
<div class="swiper-container swiper-tabpage-tabs">
  <div class="swiper-wrapper">
    <div class="swiper-slide active">手机短信登录</div>
    <div class="swiper-slide">帐号登录</div>
    <div class="bar">
      <div class="color"></div>
    </div>
  </div>
</div>
  <div class="swiper-container swiper-tabpage-pages">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-tabpage-page">
        <div class="swiper-container swiper-pull">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-pull-body">
              手机短信登录 - 内容
              <div class="swiper-scrollbar"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-tabpage-page">
        <div class="swiper-container swiper-pull">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-pull-body">
              帐号登录 - 内容
              <div class="swiper-scrollbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>