<template>
<div class="slide" ref="slide">
<ul class="list clearfix" id="slide-list">
<li v-for="d in slideArr">
<a href=""><img :src="d.pic_url" /></a>
<div class="title">
<a href="">{{d.title}}</a>
</div>
</li>
</ul>
<div class="count"><strong class="cur">1</strong>/3</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
data(){
return{
slideArr : [
{
"title" : "宁波待拆迁住宅区突发爆炸现场",
"pic_url" : "http://xxx.com/test/images/ba98541462ddb36_size28_w600_h400.jpg"
},
{
"title" : "宁波待拆迁住宅区突发爆炸现场",
"pic_url" : "http://xxxx.com/test/images/C6C3B19CBE38BA8829CA8C1DEE44FAF0A18C4C62_size25_w568_h423.jpg"
}
]
}
},
methods : {
_setSlideWidth(){
var list = document.querySelector("#slide-list"),item = list.getElementsByTagName("li"),str = 0;
list.style.width=(640*item.length*2)+"px";
}
},
mounted() {
this._setSlideWidth();
setTimeout(() => {
var bScroll = new BScroll(".slide",{
scrollY : false,
scrollX : true,
momentum: false,
snap: {
loop: true,
threshold: 0.3,
speed: 400
},
click:true
});
bScroll.on("scrollEnd",function(o){
console.log(bScroll.getSelectedIndex())
})
},20);
}
}
</script>
<style lang="scss" scoped>
.slide{ overflow:hidden;margin:.4em 0;position: relative; }
.list li{width:640px;float:left;position:relative;}
.list li .title{ position:absolute;bottom:0;left:0;width:100%; padding:.5em 0; background-image: linear-gradient(rgba(132, 132, 132, 0.08), rgba(132, 132, 132, 0.29), rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.61)); }
.list li .title a{ font-size:1.2em;color:#dbd9da;margin-left:2%; }
.count{ position:absolute;bottom:.5em;right:.5em;color:#dbd9da; }
.cur{ color:#c2424f; font-size:1.2em; }
</style>
想在scrollEnd事件里监听console.log(bScroll.getSelectedIndex())
为什么返回一个false给我?
文档里明明说 获取当前选中的索引值 是number类型的