账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue的插件BetterScroll的getSelectedIndex方法怎么调用的?
    28
    0
    <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类型的

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ↗冷色的回忆ε 普通会员 1楼

      在Vue中,我们可以使用 BetterScroll 组件的 getSelectedIndex 方法来获取当前选中的索引。这个方法通常在 BetterScroll 的实例化过程中调用。

      例如,如果你在 Vue 应用中创建了一个 BetterScroll 组件,你可以这样调用 getSelectedIndex 方法:

      javascript BetterScroll.getSelectedIndex()

      这将会返回当前选中的索引。如果你想要获取到特定索引的选中的元素,你可以提供这个索引作为参数:

      javascript BetterScroll.getSelectedIndex(1)

      这将会返回选中的元素的索引。注意,这里的索引是从 0 开始的,所以索引 1 指的是第 2 个元素。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部