vue中实现购物页面侧栏分类随滚动自动激活侧栏分类,商品页面侧栏分类和页面滚动联动demo

1.效果如图页面滚动,吸顶区吸顶(注释了,根据需要修改),下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮

2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片

3.下面附上源码:

创建一个虚拟数据文件mydata.js

1.效果如图页面滚动,吸顶区吸顶,下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮





2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片


3.下面附上源码:
mydata.js


const cateList = [{
   
    id: 1,
    name: '手机数码'
},
{
   
    id: 2,
    name: '礼品鲜花'
},
{
   
    id: 3,
    name: '男装女装'
},
{
   
    id: 4,
    name: '母婴用品'
},
{
   
    id: 5,
    pid: 1,
    name: '手机通讯'
},
{
   
    id: 6,
    pid: 1,
    name: '运营商'
},
{
   
    id: 8,
    pid: 5,
    name: '全面屏手机',
    picture: '/static/temp/cate2.jpg'
},
{
   
    id: 9,
    pid: 5,
    name: '游戏手机',
    picture: '/static/temp/cate3.jpg'
},
{
   
    id: 10,
    pid: 5,
    name: '老人机',
    picture: '/static/temp/cate1.jpg'
},
{
   
    id: 11,
    pid: 5,
    name: '拍照手机',
    picture: '/static/temp/cate4.jpg'
},
{
   
    id: 12,
    pid: 5,
    name: '女性手机',
    picture: '/static/temp/cate5.jpg'
},
{
   
    id: 14,
    pid: 6,
    name: '合约机',
    picture: '/static/temp/cate1.jpg'
},
{
   
    id: 15,
    pid: 6,
    name: '选好卡',
    picture: '/static/temp/cate4.jpg'
},
{
   
    id: 16,
    pid: 6,
    name: '办套餐',
    picture: '/static/temp/cate5.jpg'
},
{
   
    id: 17,
    pid: 2,
    name: '礼品',
},
{
   
    id: 18,
    pid: 2,
    name: '鲜花',
},
{
   
    id: 19,
    pid: 17,
    name: '公益摆件',
    picture: '/static/temp/cate7.jpg'
},
{
   
    id: 20,
    pid: 17,
    name: '创意礼品',
    picture: '/static/temp/cate8.jpg'
},
{
   
    id: 21,