js常用插件之移动端滑动插件swiper，BScroll
这两个插件作为移动端滑动事件的扛把子，强烈建议看官方文档，更详细
BScroll案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- <script src="./better.js"></script> -->
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*对外层div进行了高度上的限制*/
.wrapper {
/* position: fixed;
left: 0;
top: 0;
bottom: 0; */
overflow: hidden;
height: 100vh;
background-color: red;
}
*{
padding: 0;
margin: 0;
}
.content li {
/* margin-top: 0.625rem; */
background-color: #ccc;
height: 100vh;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper" @scroll='scroll' ref='soroll'>
<ul class="content">
<li>..1</li>
<li>{
{
a}}</li>
<li>.3.</li>
<li>4...</li>
<li>5..</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<!-- <button @click="b" type="button">111</button> -->
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
a: 'HHHHHHHHH',
BScroll: null
}
},
beforeDestroy() {
this.$refs.soroll && this.$refs.soroll.destroy()
},
mounted() {
this.$nextTick(() => {
if (!this.BScroll) {
this.BScroll = new BScroll(this.$refs.soroll, {
click: true, // 元素可触发点击事件
scrollX: true, // 横向可滑动，默认为false
scrollY: true, // 纵向可滑动，默认为true
probeType: 2,
pullDownRefresh:true,
pullUpLoad:true,
// bounce: false, // 当滚动超过边缘的时候无回弹动画
// preventDefaultException: { // 设置局部某元素原生事件不被禁止（默认preventDefault为true）
// className: 【正则表达式】
// },
snap: {
// 滑动切换的一些配置
// speed: 800, // 滑动切换的速度
// easing: { // 滑动切换的动画效果
// style: 'ease-in'
// },
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
// stepX: window.innerWidth, // 横向切换距离为窗口宽度
// stepY: window.innerHeight // 纵向切换距离为窗口高度
}
})
this.BScroll.on('scroll', (pos) => {
// console.log(pos)
})
this.BScroll.on('pullingUp', (pos) => {
console.log(pos)
console.log('lll')
this.BScroll.finishPullUp();
})
this.BScroll.on('pullingDown', (pos) => {
console.log(pos)
console.log('lll')
this.BScroll.finishPullDown();
})
} else if (!this.$refs.soroll) {
return;
} else {
this.BScroll.refresh()
}
})
},
methods: {
b() {
// this.BScroll.scrollTo(0, -800,1000)//作用：滚动到指定的位置
this.BScroll.scrollBy(0, -200, 1000) //作用：相对于当前位置偏移滚动 x,y 的距离。
},
}
})
</script>
</body>
</html>
swiper6案例
let that = this
this.mySwiper1 = new Swiper('.out-container', {
watchSlidesProgress: true,
effect: 'fade',
fade: {
crossFade: true,
},
touchRatio: 5,
freeMode: true,
freeModeSticky: true,
freeModeMomentumVelocityRatio: 3,
parallax: "true",
direction: 'vertical',
// loop: true,
initialSlide: 0,
observer: true,
slidesPerView: 'auto',
runCallbacksOnInit: true,
resistanceRatio: 0,
on: {
progress: function (swiper) {
},
transitionEnd: function () {
console.log(this.activeIndex)
},
touchEnd(swiper, event) {
}
}
})
this.mySwiper2 = new Swiper('.title', {
freeMode: true,
freeModeSticky: true,
freeModeMomentumVelocityRatio: 5,
parallax: "true",
direction: 'vertical',
// loop: true,
initialSlide: 0,
slidesPerView: 'auto',
runCallbacksOnInit: true,
resistanceRatio: 0,
observer: true,
})
//双向控制
this.mySwiper1.controller.control = [this.mySwiper2];