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,