1、原生微信小程序
实现方法
使用微信小程序文档的scroll-view的属性scroll-into-view可以实现简单类似于锚点的左右联动效果。当左侧切换选中状态navActive改变时随之右侧列表绑定的属性值改变时随着会滑动到对id的位置id="category-x"处(scroll-into-view="category-{{toView}}")。注意：id不能以数字开头
效果图：
wxml
<!--shared_store/pages/tests/tests.wxml-->
<view class="test-box">
<view class="box-box">
<view class="aside" id="leftNav">
<scroll-view scroll-y="true" scroll-with-animation="true">
<view
class="lf-lis {{navActive == index?'selected':''}}"
wx:for="{{categories}}"
wx:key="index"
data-index="{{index}}"
bindtap="navigateTap"
>
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="right-content" id="right-content" ref="rightContent">
<!-- 通过scroll-into-view 可以实现类型于 瞄点链接的效果 当 navActive 改变时 会自动划到id="category-x"处 -->
<scroll-view
scroll-y="true"
scroll-into-view="category-{{toView}}"
bindscroll="scroll"
bindscrolltolower="scrolltolower"
scroll-with-animation="true"
style="height: 100%"
class="conterScroll"
>
<view
wx:for="{{products}}"
wx:key="index"
id="category-{{index}}"
class="ri-box"
>
<view class="ri-lis">
<view class="ri_lis-title">------{{ item.name }}------</view>
<view class="ri-lis-box">
<view
class="ri-lis-li"
wx:for="{{item.child}}"
wx:for-index="ind" wx:for-item="items">
<image
class="imgs"
src="{{items.img}}"
alt=""
/>
<view class="li_title">{{ items.name }}</view>
</view>
</view>
</view>
</view>
<!-- 最后一类商品不够时，添加高度撑满屏幕 -->
<view
style="{{'height:' + (height -300) + 'rpx;'}}"
wx:if="childLth < 15"
></view>
</scroll-view>
</view>
</view>
</view>js
// shared_store/pages/tests/tests.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
http_host: http_host, //域名
theme: app.globalData.style_color,
categories: [
// 左侧导航栏的选项
{ id: 1, name: "分类1" },
{ id: 2, name: "分类2" },
{ id: 3, name: "分类3" },
],
navActive: 0,
products: [
// 右侧商品列表的模块
{
id: "product1",
name: "商品1",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product2",
name: "商品2",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product3",
name: "商品3",
child: [
{ id: "product1", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product3", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product6", name: "商品1-6",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product6", name: "商品1-7",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
// {
// id: "product4",
// name: "商品4",
// child: [
// { id: "product2", name: "商品1-1" ,img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png'},
// { id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// { id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// { id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// ],
// },
],
childLth: "",
hightArr: [], //列表每个分类对应的区域top集合
lock: false,
toView: "",//右边瞄点项
height: 0,//商品列表高度
},
navigateTap(e) {
var that = this;
let index=e.currentTarget.dataset.index;
let cla=e.currentTarget.dataset.cla;
console.log(cla,'pppppppppppp');
that.setData({
lock:true,
navActive: index,
toView: index,
});
},
scroll: function (e) {
var that = this;
if(that.data.lock){
return that.setData({
lock:false,
});
}
console.log('falsefalsefalsefalsefalse');
let scrollTop = e.detail.scrollTop;
let scrollArr = that.data.hightArr;
if (that.data.lock) {
that.setData({
lock:false,
});
return;
}
for (let i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
that.setData({
navActive:0,
});
} else if (
scrollTop >= scrollArr[i] - scrollArr[0] &&
scrollTop < scrollArr[i + 1] - scrollArr[0]
) {
that.setData({
navActive:i,
});
} else if (
scrollTop >=
scrollArr[scrollArr.length - 1] - scrollArr[0]
) {
that.setData({
navActive:scrollArr.length - 1,
});
}
}
},
infoScroll: function () {
let that = this;
let len = that.data.products.length;
that.childLth = that.data.products[len - 1].child.length;
// //设置商品列表高度
wx.getSystemInfo({
success: function (res) {
let heights = res.windowHeight * (750 / res.windowWidth) - 98;
that.setData({
height:heights,
});
},
});
let hightArr = [];
for (let i = 0; i < len; i++) {
//获取元素所在位置
let query = wx.createSelectorQuery();
query.select("#category-" + i).boundingClientRect();
query.selectViewport().scrollOffset()
query.exec(function (res) {
let top = res[0].top;
hightArr.push(top);
that.setData({
hightArr:hightArr,
});
});
}
},
scrolltolower() {
console.log("触底事件");
// 在这里处理触底事件的逻辑
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this;
that.infoScroll();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})wxss
/* shared_store/pages/tests/tests.wxss */
page {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.test-box {
width: 100%;
height: 100vh;
}
.pay_header {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #000;
line-height: 88rpx;
}
.pay_imgs {
width: 28rpx;
height: 50rpx;
position: absolute;
left: 28rpx;
top: 50%;
transform: translateY(-50%);
}
.arrow_img {
width: 48rpx;
height: 48rpx;
}
view {
box-sizing: border-box;
}
.box-box {
width: 100%;
height: calc(100vh - 88rpx);
display: flex;
}
.aside {
width: 100px;
height: 100%;
background-color: #fff;
}
.lf-lis {
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
.selected {
background-color: rgba(0, 238, 255, 0.418);
color: #fff;
}
.right-content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.right-content::-webkit-scrollbar {
display: none;
}
.ri_lis-title {
width: 100%;
color: #999;
padding: 20px;
text-align: center;
}
.ri-lis-box {
width: 100%;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.ri-lis-li {
margin-right: 10px;
margin-bottom: 10px;
}
.ri-lis-li:nth-child(3n) {
margin-right: 0;
}
.imgs {
width: 80px;
height: 80px;
border-radius: 50%;
}
.li_title {
width: 100%;
text-align: center;
font-size: 12px;
}
.entry-box {
height: calc(100vh - 100px);
}2、uniapp
实现方法
通过使用锚点的左右联动效果。同上
效果图：
完整代码：
<template>
<view class="test-box">
<!-- #ifdef H5 -->
<view class="pay_header">
<view class="pay_imgs" @tap="returns"
><image class="arrow_img" src="/static/images/imgs/arrowes1.png"></image
></view>
测试
</view>
<!-- #endif -->
<view class="box-box">
<view class="aside" id="leftNav">
<scroll-view scroll-y="true" scroll-with-animation="true">
<view
class="lf-lis"
:class="{ selected: navActive == index }"
v-for="(category, index) in categories"
:key="index"
@click="navigateTap(index, 'b' + index)"
>
{{ category.name }}
</view>
</scroll-view>
</view>
<view class="right-content" id="right-content" ref="rightContent">
<scroll-view
scroll-y="true"
:scroll-into-view="toView"
@scroll="scroll"
@scrolltolower="scrolltolower"
scroll-with-animation="true"
style="height: 100%"
class="conterScroll"
>
<view
v-for="(product, index) in products"
:key="index"
:id="'b' + index"
class="ri-box"
>
<view class="ri-lis">
<view class="ri_lis-title">------{{ product.name }}------</view>
<view class="ri-lis-box">
<view
class="ri-lis-li"
v-for="(item, ind) in product.child"
:key="ind"
>
<img
class="imgs"
:src="item.img"
alt=""
/>
<view class="li_title">{{ item.name }}</view>
</view>
</view>
</view>
</view>
<!-- 最后一类商品不够时，添加高度撑满屏幕 -->
<view
:style="'height:' + (height - 300) + 'rpx;'"
v-if="childLth < 15"
></view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
categories: [
// 左侧导航栏的选项
{ id: 1, name: "分类1" },
{ id: 2, name: "分类2" },
{ id: 3, name: "分类3" },
],
navActive: 0,
products: [
// 右侧商品列表的模块
{
id: "product1",
name: "商品1",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product2",
name: "商品2",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product3",
name: "商品3",
child: [
{ id: "product1", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product3", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5" ,img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png'},
{ id: "product6", name: "商品1-6" ,img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png'},
{ id: "product6", name: "商品1-7" ,img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png'},
],
},
// {
// id: "product4",
// name: "商品4",
// child: [
// { id: "product2", name: "商品1-1" },
// { id: "product2", name: "商品1-2" },
// { id: "product2", name: "商品1-3" },
// { id: "product4", name: "商品1-4" },
// ],
// },
],
childLth: "",
hightArr: [], //列表每个分类对应的区域top集合
dis_scroll: false,
lock: false,
toView: "",
height: 0,
};
},
mounted() {
this.infoScroll();
},
methods: {
navigateTap(index, id) {
this.toView = id;
this.navActive = index;
this.$set(this, "lock", true);
uni.$emit("scroll");
},
scroll: function (e) {
console.log("e -----> ", e);
let scrollTop = e.detail.scrollTop;
let scrollArr = this.hightArr;
if (this.lock) {
this.$set(this, "lock", false);
return;
}
for (let i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
this.navActive = 0;
} else if (
scrollTop >= scrollArr[i] - scrollArr[0] &&
scrollTop < scrollArr[i + 1] - scrollArr[0]
) {
this.navActive = i;
} else if (
scrollTop >=
scrollArr[scrollArr.length - 1] - scrollArr[0]
) {
this.navActive = scrollArr.length - 1;
}
}
uni.$emit("scroll");
},
infoScroll: function () {
let that = this;
let len = that.products.length;
that.childLth = that.products[len - 1].child.length;
//设置商品列表高度
uni.getSystemInfo({
success: function (res) {
console.log(" res-----> ", res);
that.height = res.windowHeight * (750 / res.windowWidth) - 98;
},
});
console.log(that.height, "that.height");
let height = 0;
let hightArr = [];
for (let i = 0; i < len; i++) {
//获取元素所在位置
let query = uni.createSelectorQuery().in(this);
let idView = "#b" + i;
query.select(idView).boundingClientRect();
query.exec(function (res) {
let top = res[0].top;
hightArr.push(top);
that.hightArr = hightArr;
});
}
console.log(that.hightArr, "that.hightArr");
},
scrolltolower() {
console.log("触底事件");
// 在这里处理触底事件的逻辑
},
},
};
</script>
<style scoped lang="scss">
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.test-box {
width: 100%;
height: 100vh;
}
.pay_header {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #000;
line-height: 88rpx;
}
.pay_imgs {
width: 28rpx;
height: 50rpx;
position: absolute;
left: 28rpx;
top: 50%;
transform: translateY(-50%);
}
.arrow_img {
width: 48rpx;
height: 48rpx;
}
view {
box-sizing: border-box;
}
.box-box {
width: 100%;
height: calc(100vh - 88rpx);
display: flex;
}
.aside {
width: 100px;
height: 100%;
background-color: #fff;
// overflow-y: auto;
}
.lf-lis {
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
.selected {
color: aqua;
}
.right-content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.right-content::-webkit-scrollbar {
display: none;
}
.ri_lis-title {
width: 100%;
color: #999;
padding: 20px;
text-align: center;
}
.ri-lis-box {
width: 100%;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.ri-lis-li {
margin-right: 10px;
margin-bottom: 10px;
&:nth-child(3n) {
margin-right: 0;
}
}
.imgs {
width: 80px;
height: 80px;
border-radius: 50%;
}
.li_title {
width: 100%;
text-align: center;
font-size: 12px;
}
.entry-box {
height: calc(100vh - 100px);
}
</style>
3、h5
实现方法
通过使用锚点的左右联动效果。同上
效果图：
完整代码test.html:注意：这里只是实例，按照基本思路即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>分类</title>
<script
src="static/js/vue.global.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="static/js/axios.min.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="static/js/api.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="static/js/vant.min.js"
type="text/javascript"
charset="utf-8"
></script>
<link href="static/css/vant.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<van-nav-bar
title="测试"
left-arrow
fixed
placeholder
z-index="999"
:safe-area-inset-top="true"
@click-left="onClickLeft"
></van-nav-bar>
<div class="box-box">
<div class="left-nav" id="leftNav">
<div
class="lf-lis"
:class="{'selected':nagInd==index}"
v-for="(category, index) in categories"
:key="index"
@click="navigateToCategory(category.id,index)"
>
{{ category.name }}
</div>
</div>
<div
class="right-content"
id="right-content"
ref="rightContent"
@scroll="handleScroll"
>
<div
v-for="(product, index) in products"
:key="index"
:id="'b'+index"
class="ri-box"
>
<div class="ri-lis">
<div class="ri_lis-title">------{{ product.name }}------</div>
<div class="ri-lis-box">
<div
class="ri-lis-li"
v-for="(item, ind) in product.child"
:key="ind"
>
<img
class="imgs"
:src="`../static/images/blind_box_${ind+1}.png`"
alt=""
/>
<div class="li_title">{{item.name}}</div>
</div>
</div>
</div>
</div>
<!-- 最后一类商品不够时，添加高度撑满屏幕 -->
<div class="entry-box" v-if="childLth<15"></div>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
categories: [
// 左侧导航栏的选项
{ id: 1, name: "分类1" },
{ id: 2, name: "分类2" },
{ id: 3, name: "分类3" },
],
nagInd: 0,
products: [
// 右侧商品列表的模块
{
id: "product1",
name: "商品1",
child: [
{ id: "product2", name: "商品1-1" },
{ id: "product2", name: "商品1-2" },
{ id: "product2", name: "商品1-3" },
{ id: "product4", name: "商品1-4" },
{ id: "product5", name: "商品1-5" },
],
},
{
id: "product2",
name: "商品2",
child: [
{ id: "product2", name: "商品1-1" },
{ id: "product2", name: "商品1-2" },
{ id: "product2", name: "商品1-3" },
],
},
{
id: "product3",
name: "商品3",
child: [
{ id: "product1", name: "商品1-1" },
{ id: "product2", name: "商品1-2" },
{ id: "product3", name: "商品1-3" },
{ id: "product4", name: "商品1-4" },
{ id: "product5", name: "商品1-5" },
{ id: "product6", name: "商品1-6" },
{ id: "product6", name: "商品1-7" },
],
},
// {
// id: "product4",
// name: "商品4",
// child: [
// { id: "product2", name: "商品1-1" },
// { id: "product2", name: "商品1-2" },
// { id: "product2", name: "商品1-3" },
// { id: "product4", name: "商品1-4" },
// ],
// },
],
childLth: "",
hightArr: [], //列表每个分类对应的区域top集合
dis_scroll: false,
};
},
created() {},
mounted() {
let that = this;
this.$nextTick(() => {
that.infoScroll();
});
const leftColumn = document.getElementById("leftNav");
const rightColumn = this.$refs.rightContent;
console.log("leftColumn -----> ", leftColumn);
console.log("rightColumn -----> ", rightColumn);
// 监听左侧按钮点击事件
leftColumn.addEventListener("click", function () {
that.dis_scroll = true;
});
// 监听右侧滚动事件
rightColumn.addEventListener("scroll", function (event) {
console.log("res1111111 -----> ", event);
// 获取右侧滚动距离
const scrolledElement = event.target;
const scrollDistance = scrolledElement.scrollTop;
// console.log("scrollDistance -----> ", scrollDistance);
if (!that.dis_scroll) {
console.log("右侧触发了滚动事件");
// 在这里添加处理右侧滚动事件的逻辑
// 设置左侧滚动位置-左右联动
// leftColumn.scrollTop = scrollDistance;
// 选中状态联动随之改变
// if (that.left_scroll) return;
that.hightArr.map((item, index) => {
if (scrollDistance > item) {
that.nagInd = index;
}
});
} else {
console.log("左侧触发了滚动事件");
that.dis_scroll = false;
}
});
},
methods: {
handleScroll() {
console.log(
"触底触底触底触底触底触底触底触底触底触底触底触底触底触底触底"
);
// 在这里处理触底事件的逻辑
},
navigateToCategory(categoryId, index) {
this.nagInd = index;
// console.log(
// "this.$refs.rightContent1111111 -----> ",
// this.$refs.rightContent.querySelector(`#b${index}`)
// );
// console.log(
// "this.$refs.rightContent3333333 -----> ",
// document.getElementById("right-content")
// );
// 找到对应分类在右侧商品列表中的位置
const categoryElement = this.$refs.rightContent.querySelector(
`#b${index}`
);
const rightEle = document.getElementById("right-content");
// const categoryElement = document.getElementById(`#b${index}`);//null
if (categoryElement) {
// 使用滚动或动画效果将页面滑动到对应位置
// categoryElement.scrollIntoView({ behavior: "smooth" }); //特别注意坑点-使用后左侧导航栏切换第一次切换有问题
rightEle.scrollTop = categoryElement.offsetTop - 44; //减去顶部导航栏高度
}
},
infoScroll: function () {
let that = this;
let len = that.products.length;
that.childLth = that.products[len - 1].child.length;
let height = 0;
let hightArr = [];
for (let i = 0; i < len; i++) {
//获取元素所在位置
let idView = "b" + i;
// console.log(" idView -----> ", idView);
let query = document.getElementById(idView);
// console.log(query, "queryqueryqueryquery");
let rect = query.getBoundingClientRect();
// console.log(rect, "rectrectrectrectrect");
let top = rect.top;
hightArr.push(top);
that.hightArr = hightArr;
// console.log(hightArr, "hightArrhightArr");
}
},
},
});
app.use(vant);
app.mount("#app");
</script>
<style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.van-nav-bar .van-icon {
color: #000000;
}
.van-nav-bar__content {
background-color: #fff;
height: 44px;
}
.van-hairline--bottom:after {
border: none;
}
div {
box-sizing: border-box;
}
.box-box {
width: 100%;
height: calc(100vh - 44px);
display: flex;
}
.left-nav {
width: 100px;
height: 100%;
background-color: #fff;
overflow-y: auto;
}
.lf-lis {
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
.selected {
color: aqua;
}
.right-content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.right-content::-webkit-scrollbar {
display: none;
}
.ri_lis-title {
width: 100%;
color: #999;
padding: 20px;
text-align: center;
}
.ri-lis-box {
width: 100%;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.ri-lis-li {
margin-right: 10px;
margin-bottom: 10px;
&:nth-child(3n) {
margin-right: 0;
}
}
.imgs {
width: 80px;
height: 80px;
border-radius: 50%;
}
.li_title {
width: 100%;
text-align: center;
font-size: 12px;
}
.entry-box {
height: calc(100vh - 100px);
}
</style>
</body>
</html>
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
