Checked such as vant, mint components and did not find the expected effect (cube component, but I really do n’t want to introduce a third-party component library in the project), but it is actually very common in mobile app development An effect. So I made this effect according to my own ideas,
The effect is:
1. The left and right columns can slide independently, (the basic style effect must be completed first)
2. Click the tab on the left, slide the content on the right to the corresponding content,
3. And when sliding the content on the right, the tab on the left also focuses to the corresponding position
Code:
export default{
name: "",
components:{
// Tabbar2
},
data(){
return{
list: ['Popular', 'Chinese Super League', 'English Premier League', 'La Liga', 'Serie A', 'National Team', 'Chinese League', 'Yugoslavia', 'Dutch A', 'Portuguese A', 'French Ligue 1' ',' Suchao ',' Russian Super League ',' Turkish Super League ',' American Football Association ',' Sunday Tournament ',' K League '] ,,
curLeft: 0
}，
methods：{
leftSelect (index) {
// The left click controls the right (bind the click event to the button looped out on the left)
this.curLeft = index
let num // Set the scroll position
let right = document.getElementById('right')
if (index == 0) num = 605 * index-60 // 605 is the height of each part on the right, 60 is the height of the header that covers the height of the entire screen, this part of course does not count the sliding distance,
else num = 605*index
$("#right").animate({ scrollTop: num }, 400);
}
},
mounted: function () {
// Slide on the right to control the left
var right = document.getElementById ("right") // Add listening event to the sliding part
right.addEventListener('scroll', () => {
let hopeIndex = Math.ceil((right.scrollTop-60)/605)
this.curLeft = hopeIndex calculates the index that the content of the current screen window should belong to from the monitored value, and assigns it to the index on the left
}, true);
}
},
}