Better-scroll realizes the effect of linking menu and content
|
1. Basic use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
border: 0;
outline: none;
font-family: Arial;
list-style: none;
-webkit-font-smoothing: antialiased;
}
html, body, #app{
height: 100%;
}
#app{
padding: 20px 0;
box-sizing: border-box;
}
.wrapper{
display: flex;
height: 100%;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
}
.menu{
width: 100px;
height: 100%;
padding-right: 20px;
}
.content{
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
}
.menu-item{
margin-bottom: 10px;
}
.menu-item-content{
width: 100%;
padding: 7px 0;
text-align: center;
border: 1px solid #ddd;
border-radius: 2px;
color: #333;
cursor: pointer;
}
.active{
border-color: #409EFF;
background: #409EFF;
color: #fff;
}
.content-item{
margin-bottom: 20px;
}
.content-item-text{
border-radius: 2px;
border: 1px solid #ddd;
}
.content-item-text>img{
width: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<div class="menu">
<ul>
<li class="menu-item" v-for="(item, index) in menu" :key="index" @click="handleClick(index)">
<div class="menu-item-content" :class="{'active': getCurrentIndex() == index}" v-text="item.label"></div>
</li>
</ul>
</div>
<div class="content" ref="content">
<ul>
<li class="content-item" v-for="(item, index) in content" :key="index">
<div class="content-item-text">
<img :src="item" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
contentScroll: null,
listHeight: [], // Used to store the height of each subbox currentIndex: 0,
scrollY: 0,
menu: [
{
label: 'Picture 1',
id: 0,
},
{
label: 'Picture 2',
id: 1,
},
{
label: 'Picture 3',
id: 2,
},
{
label: 'Picture 4',
id: 3,
},
{
label: 'Picture 5',
id: 4,
},
],
content: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0f21d2459d90b3bd19b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2db2ba2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019b2cec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140723%2F18505720_094503373000_2.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F10616010_215644481373_2.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8edf&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg',
]
},
methods: {
initScroll() {
const content = this.$refs.content;
this.contentScroll = new BScroll(content, {
click: true, // Because betterscroll will prevent click events by default. Here we need to set mouseWheel: true, // Mouse wheel scrolling probeType: 3,
scrollY: true,
scrollbar: {
fade: true, // Whether to display the scroll bar interactive: false, // New in 1.8.0},
preventDefault: false, // Prevents the browser from selecting by default });
// Get the scroll value and assign it to scrollY
this.contentScroll.on('scroll', pos => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
getCurrentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
const height = this.listHeight[i];
const height1 = this.listHeight[i + 1];
// Solve the problem of menu display when the content is not enough to fit the box height when scrolling to the end. When scrolling to the end, select the last menu // maxScrollY: maximum vertical scroll position if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
return this.content.length - 1;
}
if (!height1 || (this.scrollY < height1 && this.scrollY >= height)) {
return i;
}
}
},
handleClick(index) {
const content = this.$refs.content;
const contentList = content.getElementsByClassName('content-item');
const el = contentList[index];
// scrollToElement: scroll to the target element this.contentScroll.scrollToElement(el, 300);
},
getHeightList() {
this.listHeight = [];
let height = 0;
this.listHeight.push(height);
const content = this.$refs.content;
const contentList = content.getElementsByClassName('content-item');
for (let i = 0; i < contentList.length; i++) {
const item = contentList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
this.initScroll();
}
},
mounted() {
this.$nextTick(function() {
// Because the image is too large and loads slowly, it is initialized before it is fully loaded, resulting in the inability to scroll, so a timer delay is added here setTimeout(() => {
this.getHeightList();
}, 400);
});
},
});
</script>
</body>
</html>
Due to browser compatibility, the scroll bar style of each browser is different. If you use CSS style to modify it, only some browsers can achieve the effect you want. Better-scroll simulates the scroll bar. The parent container is set to a fixed height and the overflow:hidden attribute is set to hide the child elements after they exceed the parent container. Better-scroll acts on the parent container and uses the transform:translate attribute to scroll the child elements to the desired location. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Reasons why MySQL queries are slow
>>: Summary of horizontal scrolling website design
Recommend
Solution to Docker pull timeout
Recently, Docker image pull is very unstable. It ...
HTML web page creation tutorial Use iframe tags carefully
Using iframes can easily call pages from other we...
How to implement function currying and decurrying in Javascript
Function currying (black question mark face)? ? ?...
Solution to index failure in MySQL due to different field character sets
What is an index? Why create an index? Indexes ar...
Solve the problem that the element DateTimePicker+vue pop-up box only displays hours
Three knowledge points: 1. CSS descendant selecto...
Steps for Docker to build its own local image repository
1. Environment and preparation 1. Ubuntu 14.04 2....
Install nvidia graphics driver under Ubuntu (simple installation method)
Install the nvidia graphics card driver under Ubu...
Using js to implement a number guessing game
Last week, the teacher gave me a small homework, ...
This article will show you how JavaScript garbage collection works
Table of contents 1. Overview 2. Memory Managemen...
Linux server SSH cracking prevention method (recommended)
1. The Linux server configures /etc/hosts.deny to...
Q&A: Differences between XML and HTML
Q: I don’t know what is the difference between xml...
Summary of Vue's monitoring of keyboard events
Key Modifiers When listening for keyboard events,...
Detailed explanation of Strict mode in JavaScript
Table of contents Introduction Using Strict mode ...
Detailed explanation of the installation commands and usage of Docker and FastDFS
Docker Features 1) Quick to get started It only t...
Example code for implementing bottom alignment in multiple ways with CSS
Due to the company's business requirements, t...