better-scroll 实现选项卡和内容的双向滑动

better-scroll 实现选项卡和内容的双向滑动（效果展示）

npm i better-scroll --save

<template>
    <div class="wrapper">
        <div class="menu-wrapper">
            <ul>
                <li :class="{'actived':actived == index}" v-for="(item,index) in menu" :key="index" @click="checkMenu(index)">
                    {{item}}
                </li>
            </ul>
        </div>
        <div class="item-wrapper" ref="itemWrapper">
            <ul>
                <li>
                    menu1
                    <img src="https://dummyimage.com/600x800/fef0d1" @load="loadImage" alt="">
                </li> 
                 <li>
                     menu2
                    <img src="https://dummyimage.com/600x1000/688147" @load="loadImage" alt="">
                </li> 
                 <li>
                     menu3
                    <img src="https://dummyimage.com/600x600/ecac5f" @load="loadImage" alt="">
                </li> 
                 <li>
                     menu4
                    <img src="https://dummyimage.com/600x700/87d74f" @load="loadImage" alt="">
                </li> 
                 <li>
                     menu5
                    <img src="https://dummyimage.com/600x500/4b79bb" @load="loadImage" alt="">
                </li> 
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    data(){
        return{
            menuWrapper:'',
             menu:[
                'menu1',
                "menu2",
                'menu3',
                'menu4',
                "menu5"
                ],//选项卡集合
            onload:0,//图片加载完成个数
            actived:0,//当前所在的选项卡
            listHeight:[]//用于存储右边各个选项卡内容 距离顶部高度
        }
    },
    mounted(){
       
      
    },
    methods:{
        loadImage(){
            this.onload ++ //加载完成一个图片即onload ++ 
        },
        initScorll(){
            this.$nextTick(() => {
                this.itemScroll = new BScroll(this.$refs.itemWrapper, {
                    probeType: 3,//允许实时监听 scroll
                    scrollY: true,//允许竖屏滑动
                    click: true,
                    useTransition:false,  // 防止iphone微信滑动卡顿
                    bounce:false //回弹动画
                })
                this.itemScroll.on('scroll', pos => {
                    let scrollY = Math.abs(Math.floor(pos.y))
                    //当滚动距离大于或者等于listHeight数组中的某元素 就定位到该选项卡
                    this.listHeight.forEach((item,index) =>{
                        if(scrollY >= item){
                            this.actived = index
                        }
                    })
                })

            })
        },
        //得到所有选项卡内容距离顶部的距离数组
        getHeight() {
            let itemList = this.$refs.itemWrapper.children[0].children
            let height = 0
            this.listHeight.push(height);
            for (let i = 0; i < itemList.length; i++) {
                let item = itemList[i];
                height += item.clientHeight;//计算右边每一项的内容的高度并存入数组中
                this.listHeight.push(height)
            }
        },
        //选中某一个选项卡同时滚动到对应的区域
        checkMenu(ind){
            this.actived = ind
            let itemList = this.$refs.itemWrapper.children[0].children //选项卡右边内容集合，每个节点对应一个选项卡
            this.itemScroll.scrollToElement(itemList[ind],300)//点击左边选项卡滚动到对应的内容
        },  
    },
    watch:{
        onload(newval,oldval){
            if(newval == 5){
                //图片资源加载完以后计算各选项卡内容的高度
                this.initScorll()
                this.getHeight()
            }
        }
    }
}
</script>

<style lang="less">
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    background: #ffffff;
}
.actived{
    background: #ffffff!important;
}
.menu-wrapper ul li{
    width: 2rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    font-size: .36rem;
    background: #f5f5f5;
    color: #666666;
}
.item-wrapper ul li img{
    width: 100%;
}
</style>