Skip to content

Instantly share code, notes, and snippets.

@huo-feng-ding

huo-feng-ding/swiper3-dropload.html

Created May 13, 2019 06:51
Show Gist options
  • Save huo-feng-ding/9f5b89a9846d43e94100beadb415d276 to your computer and use it in GitHub Desktop.
Save huo-feng-ding/9f5b89a9846d43e94100beadb415d276 to your computer and use it in GitHub Desktop.
Download ZIP
swiper 和 dropload 一起使用 实现导航和下拉刷新
Raw
swiper3-dropload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<link rel="stylesheet" href="/static/js/src/front/forms/gather/mobile/hind/config/swiper/swiper.css"/>
<link rel="stylesheet" href="/static/js/lib/dropload/dropload.css"/>
<style>
html, body {
position: relative;
height: 100%;
touch-action: none;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="contener" style="margin:0;padding:0;height:100%;width:100%;position:absolute;">
<div style="background-color:#c7c7c7;width:100%;height:300px;float:left;">
<div style="height: 500px;">aaaaaaaaaaaaaaaa</div>
</div>
<div id="swiper" style="background-color:red;height:calc(100% - 300px);margin-top:300px;overflow-scrolling: touch;">
<div class="swiper-container" style="height: 100%;width:100%;">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 2</div>
<div id="sl" class="swiper-slide" style="overflow:scroll;/*overflow:scroll; height:500px;display: block; overflow-scrolling: touch;*/">
<div style="width: 100%; height: 3000px; border-bottom: 300px #6f7276 solid; color: #bd081d;">
Slide 1
Slide 1
Slide 1
Slide 1
</div>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</div>
</div>
<script src="/static/js/lib/jquery/jquery.js"></script>
<script src="/static/js/lib/dropload/dropload.js"></script>
<script src="/static/js/src/front/forms/gather/mobile/hind/config/swiper/swiper.js"></script>
<!--<script src="/static/js/lib/lever/alloy-lever.js"></script>-->
<script>
var swiper = new Swiper('.swiper-container',{
onSlideChangeEnd:function () {
console.log(dropload.opt, swiper.activeIndex, dropload)
dropload.$scrollArea= $('.swiper-slide').eq(swiper.activeIndex)
}
});
var dropload = $('#contener').dropload({
scrollArea: $('.swiper-slide'),
domUp: {},
loadUpFn: function (me) {
me.resetload();
},
})
// AlloyLever.config({cdn: '/static/js/lib/lever/vconsole.min.js'});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment