vue+better-scroll sliding left and right

Hits: 0

Vue+better-scroll linked sliding
left and right Effect diagram:
function: realize the click on the left, the sliding on the right, the sliding on the right, and the change on the right, use some methods of better- [scroll]
to bind the linked area, get the height, and click to pass the value, Change the scroll, use the computed property, use the height array to judge when scrolling to the right, return this I, pass it to the left tab, bring the class name, and for complete display, add better-scroll events
1,
2,
3,
4.

css:

*{             padding : 0px ;             margin : 0px ; }         ul {             list-style : none; }         .content {             display : flex;             position : absolute;             /* Do not define the left and right styles in the positioning, do not write the height, and automatically obtain the height*/             top : 50px ;             bottom : 50px ;             background-color : #eeeeee ;             width : 100% ;             overflow : hidden; }        .left{            flex:0 0 80px;            width: 80px;            background-color: #C8EBFA;        }        .left li{            width:100%;            height: 100%;        }        .left li.current{            background-color: #007AAE;            color:#fff;            font-weight: bold;        }        .left-item{            display: block;            width: 100%;            height: 100%;            line-height: 50px;            height: 50px;            text-align: center;        }        .right{            flex:1;            background-color: azure;        }        .right-item li{            width: 100%;            height: 100px;            line-height: 100px;            text-align: center;            border: 1px solid yellow;        }        h2{            text-align:right;        }

html:

<div id="app">        <div class="head">head</div>        <div class="content">            <div class="left" ref="left">                <ul>                    <li v-for="(item,index) in left" :key="index" :class="{current:index==currentIndex}"                        @click="touch(index,$event)">                        <span class="left-item ">{{item}}</span>                    </li>                                   </ul>            </div>            <div class="right" ref="right">                <ul>                    <li v-for="(item,index) in right" :key="index" class="right-item right-item-aa">                        <h2>{{item.name}}</h2>                        <ul>                            <li v-for="num in item.content">                                <div>{{item.name+num}}</div>                            </li>                                                    </ul>                    </li>                </ul>            </div>        </div>    </div>

js:

var vm = new Vue({ el: "#app" , data:{ left:[ "Mobile" , "Computer" , "TV" , "Refrigerator" , "Vacuum" , "Laundry" ], right:[ { name: "AAA" ,content:[1,2,3,4,5,6]}, {name: "BBB" ,content:[1,2,3,4,5,6]}, {name: "CCC" ,content:[1,2,3,4,5,6]}, {name: "DDD" ,content:[1,2,3,4,5,6]}, {name: "EEE " ,content:[1,2,3,4,5,6]}, {name: "FFF",content:[1,2,3,4,5,6]}, ], scrollY:0, listHeight:[] //Store the height of each item on the right}, methods:{                 _initScroll (){ // linkage instance Change the plug-in object this.lefts = new BScroll(this. $refs .left,{ click: true , //has a trigger event, probeType:3 //the effect of the probe, get the scroll height from time to time}); this.rights = new BScroll(this. $refs .right,{ probeType:3 //The effect of the probe, get the scroll height from time to time});

You may also like...

Leave a Reply

Your email address will not be published.