前言:
很多电商类网站都使用了此功能,跟随此文来实现滚动条案例把!
大致功能:
点击按钮跳转至对应的位置
滑动滚动条点击事件跟随当前位置的内容显示
具体思路:
- 给按钮绑定点击事件并传递下标
- 给需要跳转的位置进行 some 循环
- 判断点击按钮传递过来的下标是否等于 some 循环的下标
- 等于则根据距离顶部的距离进行跳转(把需要滑动元素的 scrollTop 赋值为条件成立的标签距离顶部的距离)
- 滑动时点击事件跟随显示
- 给需要滑动的标签绑定 scroll 事件
- 给点击按钮进行 some 循环
- 判断滑动标签距离顶部的距离是否大于需要跳转的位置距离顶部的距离
- 判断成功则给当前标签选中,其他全部取消选中
代码:
<template>
<div class="box" ref="box">
<ul class="left" ref="left">
<li
v-for="(item, index) in listd"
:key="index"
ref="title"
@click="meal(item, index)"
>
<router-link :to="'#' + index">
<span ref="titles">{{ item }}</span>
</router-link>
</li>
</ul>
<ul class="right" ref="commodity" @scroll="scrolls">
<li v-for="(item, index) in listds" :key="index">
<p class="title" ref="sell" :id="index">
<span>{{ item.name }}</span>
</p>
<div v-for="(items, index) in item.foods" :key="index" class="all">
<div class="lileft" @click="details(items, item)">
<img :src="items.image" alt="" />
<span class="content"
><p class="name">{{ items.name }}</p>
<p class="description">{{ items.description }}</p>
<p class="sellCount">
月售{{ items.sellCount }}<span>好评率{{ items.rating }}%</span>
</p>
<p class="price">
<span class="newprice"><span>¥</span>{{ items.price }}</span>
<span
class="oldPrice"
v-if="items.oldPrice == '' ? false : true"
>¥{{ items.oldPrice }}</span
>
</p></span
>
</div>
<div class="liright">
<button v-show="num[index] > 0" @click="add(items, index)">
<img src="@/assets/商品/remove_circle_outline.svg" alt="" />
</button>
<span ref="num" v-show="num[index] > 0">{{ num[index] }}</span>
<!-- <span ref="num" v-show="num == 0"></span> -->
<button @click="addition(items, index)">
<img src="@/assets/商品/add_circle.svg" alt="" />
</button>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
listd: [],
listds: [],
setmeal: "热销榜",
scrollHeights: 0,
heightArr: [0, 0],
num: [],
};
},
created() {
if (this.$route.query.name) {
this.setmeal = this.$route.query.name;
} else {
this.setmeal = "热销榜";
}
this.request();
this.requestgoods();
},
mounted() {
if (localStorage.getItem("num")) {
this.num = localStorage.getItem("num").split(",");
}
if (this.$refs.box.scrollHeight < 860) {
this.$refs.left.className = "left lefts";
let arr = 352 - this.$refs.left.offsetTop + 860;
this.$refs.commodity.style.height = arr + "px";
}
},
computed: {
...mapState(["pitch"]),
},
methods: {
request() {
this.$axios.get(`/before/goods/help`).then((err) => {
console.log(err.data);
this.listd = err.data;
});
},
requestgoods() {
this.$axios.get(`/before/goods`).then((err) => {
this.listds = err.data;
this.listds.some((item) => {
item.foods.some((items) => {
this.num.push(0);
});
});
});
},
meal(items, indexs) {
this.$refs.sell.some((item, index) => {
if (indexs == index) {
this.$refs.commodity.scrollTop = item.offsetTop - 350;
}
});
},
scrolls() {
this.$refs.title.some((item, index) => {
if (
this.$refs.commodity.scrollTop >
this.$refs.sell[index].offsetTop - 352
) {
this.$refs.title.some((item) => {
item.style.backgroundColor = "#f3f5f7";
});
item.style.backgroundColor = "#fff";
}
});
},
addition(item, index) {
let num = 0;
for (let i = 0; i < this.pitch.length; i++) {
if (this.pitch[i].name == item.name) {
num = i;
}
if (item.name == this.pitch[i].name) {
console.log(item.name);
}
}
this.$store.commit("addshopping", item);
this.$set(this.num, index, this.pitch[num].num);
localStorage.setItem("num", this.num);
},
add(item, index) {
let num = 0;
for (let i = 0; i < this.pitch.length; i++) {
if (this.pitch[i].name == item.name) {
num = i;
}
if (item.name == this.pitch[i].name) {
console.log(item.name);
}
}
this.$store.commit("addj", num);
this.$set(this.num, index, this.pitch[num].num);
localStorage.setItem("num", this.num);
},
details(item, title) {
console.log(item.name);
this.$router.push({
name: "Details",
query: { title: title.name, name: item.name },
});
},
},
};
</script>
<style lang="scss" scoped>
.box {
width: 100%;
// height: 100%;
display: flex;
.lefts {
overflow: auto !important;
height: 100% !important;
}
.left {
width: 1.7rem;
height: 8.6rem;
overflow: auto;
scrollbar-width: none;
li {
list-style: none;
width: 1.6rem;
height: 1.08rem;
display: flex;
flex-wrap: wrap;
background-color: #f3f5f7;
a {
width: 100%;
height: 100%;
padding: 0 0.24rem;
color: rgba(7, 17, 27, 0.8);
display: flex;
align-items: center;
text-decoration: none;
span {
width: 1.6rem;
height: 1.08rem;
font-size: 0.24rem;
line-height: 0.28rem;
display: flex;
align-items: center;
font-weight: 200;
color: rgba(7, 17, 27, 0.8);
border-bottom: 0.01rem solid rgba(7, 17, 27, 0.1);
}
}
}
}
.left::-webkit-scrollbar {
display: none;
}
.right {
width: 100%;
height: 8.6rem;
overflow: auto;
// padding-bottom: 1rem;
li {
list-style: none;
.title {
width: 100%;
height: 0.52rem;
background-color: #f3f5f7;
border-left: 0.04rem solid #d9dde1;
span {
margin-left: 0.28rem;
font-size: 0.24rem;
line-height: 0.52rem;
color: rgb(147, 153, 159);
}
}
.all {
list-style: none;
margin: 0 0.36rem;
padding: 0.36rem 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 0.01rem solid rgba(7, 17, 27, 0.1);
.lileft {
display: flex;
img {
width: 1.15rem;
height: 1.15rem;
}
.content {
margin: 0.04rem 0 0 0.2rem;
.name {
font-size: 0.28rem;
color: rgba(7, 17, 27);
line-height: 0.28rem;
}
.description {
font-size: 0.2rem;
color: rgb(147, 153, 159);
line-height: 0.2rem;
margin: 0.16rem 0;
}
.sellCount {
font-size: 0.2rem;
color: rgb(147, 153, 159);
line-height: 0.2rem;
span {
font-size: 0.2rem;
line-height: 0.2rem;
margin-left: 0.24rem;
}
}
.price {
.newprice {
font-size: 0.28rem;
line-height: 0.48rem;
color: rgb(240, 20, 20);
font-weight: 700;
span {
font-size: 0.2rem;
}
}
.oldPrice {
font-size: 0.2rem;
line-height: 0.48rem;
color: rgb(147, 153, 159);
font-weight: 700;
margin-left: 0.16rem;
text-decoration: line-through;
}
}
}
}
.liright {
display: flex;
align-items: center;
button {
background-color: #fff;
border: none;
overflow: hidden;
img {
width: 0.48rem;
height: 0.48rem;
filter: drop-shadow(rgb(0, 160, 220) 100px 0);
transform: translateX(-100px);
}
}
span {
width: 0.48rem;
// height: 0.48rem;
text-align: center;
font-size: 0.2rem;
line-height: 0.48rem;
color: rgb(147, 153, 159);
}
}
}
}
}
}
</style>
总结:
以上就是滚动条案例的代码,不懂得也可以在评论区里问我,以后会持续添加一些新的功能,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog