1.0.28 • Published 7 years ago

rjs-swiper-tabpage v1.0.28

Weekly downloads
1
License
MIT
Repository
-
Last release
7 years ago

基于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>
1.0.28

7 years ago

1.0.27

7 years ago

1.0.26

7 years ago

1.0.25

7 years ago

1.0.24

7 years ago

1.0.23

7 years ago

1.0.22

7 years ago

1.0.21

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago