vue实现商品分类左右联动

最新推荐文章于 2024-07-11 19:07:39 发布
原创 最新推荐文章于 2024-07-11 19:07:39 发布 · 置顶 · 6.5k 阅读 · 88 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#better-scroll使用 #vue实现商品分类左右联动 #vue商品列表联动 #scrollToElement #vue商品分类菜单联动

本文介绍如何使用better-scroll插件实现商品分类的左右联动效果。通过初始化数据、实现左联动右及右联动左等步骤，详细展示了联动的具体实现过程。

vue中better-scroll实现商品分类左右联动

结合better-scroll插件实现商品分类左右联动交互方式。

文章目录

前提准备

  • 安装： npm i better-scroll -S
  • 组件中引入： import BScroll from 'better-scroll'
  • better-scroll官网

相关文章：

better-scroll监听元素吸顶

better-scroll商品详情联动


步骤：

  • 先实现左联右
  • 再实现右联左

效果图

在这里插入图片描述


1. 初始化数据

data() {
    return {
        currentIndex: 0, //当前选中index
        scrollY: 0,
        heightList: [0], //存储某个分类下的商品高度列表
        flag: false, //标识是否选中
        fixedTitle: '', //当前分类标题
        tagList: [{"type": 1, "name": "全部"}, {"type": 2, "name": "热销"}], //分类列表
        tagIndex: 0, //分类tag当前index
        type: 1, // 1：全部 2：热销
        categoryList: [ // 数据仅供测试，请自行copy多些来看效果
            {   
                categoryId: 1,
                name: "健康蔬菜",
                goods: [
                    {
                        goodsName: '大个小番茄',
                        goodsSummary: '绿色小番茄',
                        goodsStock: 231,
                        goodsRetailPrice: 5.4,
                        goodsMarketPrice: 6.8,
                        // goodsMainImage: require('../../assets/images/icon/icon_1.png')
                        goodsMainImage: 'xxxxx'
                    },
                    {
                        goodsName: '新鲜小奶白菜',
                        goodsSummary: '清脆、鲜嫩蔬菜',
                        goodsStock: 134,
                        goodsRetailPrice: 3.8,
                        goodsMarketPrice: 5.5,
                        goodsMainImage: 'xxxxx'
                    },
                ]
            },
            {   
                categoryId: 2,
                name: "时令蔬菜",
                goods: [
                    {
                        goodsName: '大又甜地瓜',
                        goodsSummary: '自家种植放心品尝',
                        goodsStock: 344,
                        goodsRetailPrice: 6.5,
                        goodsMarketPrice: 8.4,
                        goodsMainImage: 'xxxxx'
                    },
                    {
                        goodsName: '精美套餐',
                        goodsSummary: '健康搭配新鲜蔬菜',
                        goodsStock: 1099,
                        goodsRetailPrice: 45.9,
                        goodsMarketPrice: 65.8,
                        goodsMainImage: 'xxxxx'
                    },
                    {
                        goodsName: '水果黄瓜',
                        goodsSummary: '可口脆嫩水果黄瓜',
                        goodsStock: 785,
                        goodsRetailPrice: 3.5,
                        goodsMarketPrice: 4.8,
                        goodsMainImage: 'xxxxx'
                    },
                ]
            },
        ]
    }
},

2. 实现左联动右

使用better-scroll中的scrollToElement方法。

说明：

  1. scrollToElement(el, time, offsetX, offsetY, easing)

    滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数

  2. scroll： 滚动时触发

  3. scrollEnd：滚动结束时触发

  4. destroy()：销毁 better-scroll，解绑事件

  • 目标元素区域上添加ref属性标识。【右侧商品列表中标识ref="good"】
<!-- 右侧商品列表 -->
<section class="right_list fixeds" ref="r_list">
    <div>
        <div class='listsWrap'>
            <ul class="goods-list" v-for="(outerItem, outerIdx) in categoryList" :key="outerIdx" ref="good">
                <li class="goods-li bd" v-for="(item, index) in outerItem.goods" :key="index">
                    <!-- 自定义内容 -->
                </li>
            </ul>
        </div>
    </div>
</section>
  • 在左边菜单中添加点击事件，滑动到右侧对应的位置。【这里定义changeMenu事件】
<aside class="fixeds" ref="l_list">
    <ul class="left-menu">
        <li ref="l_item" :class="{'active': index === currentIndex}" 
            @click="changeMenu(index, item.name)" v-for="(item, index) in categoryList" :key="index">
            <div class="cname" ref="cname">{{item.name}}</div>
        </li>
    </ul>
</aside>

changeMenu (index, name) {
    this.currentIndex = index; //当前选中index
    this.fixedTitle = name; //当前选中标题
    
	//【-32 标题高度】 根据自身调整，如果不需要写0即可。
    this.rightList.scrollToElement(this.$refs.good[index], 1000, 0, -32);
},
  • 初始化better-scroll中获取左菜单定义的ref属性，并开启点击事件
 this.left = new BScroll(this.$refs.l_list, {
     click: true, //是否开启点击事件
     probeType: 3, //是否会截流scroll事件
 })

3. 实现右联动左

  • 监听右侧滚动时触发的距离，可通过scroll事件来监听当前值。

这里右侧数据格式： 每个分类下有n个商品【即嵌套列表】

this.rightList = new BScroll(this.$refs.r_list, {
    probeType: 3, // 是否会截流scroll事件
    scrollY: true,  // 是否开启Y轴滚动方向
    click: true, // 是否开启点击事件
    useTransition: false, // 防止iphone微信滑动卡顿
    bounce: true, // 是否启用回弹动画效果
    momentumLimitDistance: 5 // 符合惯性拖动的最小拖动距离
})

this.rightList.on('scroll', (res) => {
    // 获取当前滚动距离
    this.scrollY = Math.abs(Math.round(res.y));
})
  • 定义数组，用来存储每个分类下的商品列表离顶部的距离
this.$refs.good.forEach((el, index) => {
    this.heightList.push(el.offsetHeight + this.heightList[index]);
})
  • 拿到content滚动距离和每个子商品列表离顶部距离比较。更新左菜单index选中状态

遍历每个分类下的商品列表距离列表

for (let i = 0; i < this.heightList.length; i++) {
    if (this.scrollY > this.heightList[i] && this.scrollY < this.heightList[i + 1]) {
        if (!this.flag) {
            this.currentIndex = i;
        }
    }
}

完整demo

请下载

完整js

<script>
import BScroll from "better-scroll";

export default {
    data() {
        return {
            currentIndex: 0, // 当前选中index
            scrollY: 0,
            heightList: [0], // 存储某个分类下的商品高度列表
            flag: false, // 解决是否选中当前分类index
            fixedTitle: '', // 当前分类标题
            tagList: [{"type": 1, "name": "全部"}, {"type": 2, "name": "热销"}], //分类列表
            tagIndex: 0, //分类tag当前index
            type: 1, // 1：全部 2：热销
            categoryList: [ // 数据仅供测试，请自行copy多些来看效果
                {   
                    categoryId: 1,
                    name: "健康蔬菜",
                    goods: [
                        {
                            goodsName: '大个小番茄',
                            goodsSummary: '绿色小番茄',
                            goodsStock: 231,
                            goodsRetailPrice: 5.4,
                            goodsMarketPrice: 6.8,
                            goodsMainImage: 'xxxxx'
                        },
                        {
                            goodsName: '新鲜小奶白菜',
                            goodsSummary: '清脆、鲜嫩蔬菜',
                            goodsStock: 134,
                            goodsRetailPrice: 3.8,
                            goodsMarketPrice: 5.5,
                            goodsMainImage: 'xxxxx'
                        },
                    ]
                },
				{   
                    categoryId: 2,
                    name: "时令蔬菜",
                    goods: [
                        {
                            goodsName: '大又甜地瓜',
                            goodsSummary: '自家种植放心品尝',
                            goodsStock: 344,
                            goodsRetailPrice: 6.5,
                            goodsMarketPrice: 8.4,
                            goodsMainImage: 'xxxxx'
                        },
                        {
                            goodsName: '精美套餐',
                            goodsSummary: '健康搭配新鲜蔬菜',
                            goodsStock: 1099,
                            goodsRetailPrice: 45.9,
                            goodsMarketPrice: 65.8,
                            goodsMainImage: 'xxxxx'
                        },
                        {
                            goodsName: '水果黄瓜',
                            goodsSummary: '可口脆嫩水果黄瓜',
                            goodsStock: 785,
                            goodsRetailPrice: 3.5,
                            goodsMarketPrice: 4.8,
                            goodsMainImage: 'xxxxx'
                        },
                    ]
                },
            ]
        }
    },
    mounted() {
        this.fixedTitle = this.categoryList[0].name;
		
		
        this.$nextTick(() => {
			// 初始化better-scroll
            this.scrollInit(); 
			
			// 获取某个分类下商品列表离顶部距离
            this.getCategoryListHeight();
        })
    },
    methods: {
        toCommTap(url) {
            this.$router.push(url);
        },
        changeMenu (index, name) {
            this.flag = true;
            this.currentIndex = index;
            this.fixedTitle = name;
			
			//【-32 标题高度】 根据自身调整，如果不需要写0即可。
            this.rightList.scrollToElement(this.$refs.good[index], 1000, 0, -32);
        },
        chageTag(index, type) {
            this.tagIndex = index;
            this.type = type;
            console.log('切换标签');
        },
        /** 
         * 初始化
        */
        scrollInit() {
            this.left = new BScroll(this.$refs.l_list, {
                click: true,
                probeType: 3,
            })
            
            this.rightList = new BScroll(this.$refs.r_list, {
                probeType: 3, // 是否会截流scroll事件
                scrollY: true,  // 是否开启Y轴滚动方向
                click: true, // 是否开启点击事件
                useTransition: false, // 防止iphone微信滑动卡顿
                bounce: true, // 是否启用回弹动画效果
                momentumLimitDistance: 5 // 符合惯性拖动的最小拖动距离
            })

            this.rightList.on('scroll', (res) => {
                this.scrollY = Math.abs(Math.round(res.y));
                for (let i = 0; i < this.heightList.length; i++) {
                    if (this.scrollY > this.heightList[i] && this.scrollY < this.heightList[i + 1]) {
                        if (!this.flag) {
                            this.currentIndex = i;
                        }
                        // 当滚动到倒数第2个位置时左侧列表向上滚动一个距离
                        if (i === this.$refs.l_item.length - 2) {
                            this.left.scrollToElement(this.$refs.l_item[1], 1000, 0, 0)
                        }
                        // 当滚动到倒数第3个位置时左侧列表向上下滚动一个距离
                        if (i === 2) {
                            this.left.scrollToElement(this.$refs.l_item[0], 1000, 0, 0)
                        }
						
                        // 获取当前分类标题
                        this.fixedTitle = this.$refs.cname[i].innerText;
                    }
                }
            })

            this.rightList.on("scrollEnd", pos => {
                //结束时触发事件获取一次位置，因为使用了模式2，惯性滚动不触发事件
                this.scrollY = Math.abs(Math.round(pos.y));
                this.flag = false;
            })
        },
        /**
         * 获取商品列表高度
         */
        getCategoryListHeight() {
            this.$refs.good.forEach((el, index) => {
                this.heightList.push(el.offsetHeight + this.heightList[index]);
            })
        },
        addToShopCart(item) {
            // 添加购物车事件
        },
    }
}
</script>
基于Vant实现商品分类左右联动
weixin_41234837的博客
10-20 5360
1.效果图 说明：点击左边导航栏，右边导航栏自动滑动至相应点击的内容； 滑动右边的导航栏，左边导航栏自动滑动至点击的内容； 2.代码展示 基于Vant商品分类左右联动 内容 {{ index }} ...
vue项目实现商品分类双向联动【简洁易懂】
weixin_62765236的博客
10-21 868
vue项目实现商品分类双向联动【简洁易懂】
Vue/vant第左右联动better-scroll效果实现（完整版）
NanChen的博客
01-11 2836
<template> <div> <!-- 头部 --> <van-sticky :offset-top="0"> <div class="header"> <van-icon name="chat-o" class="icon-one" /> <van-search @click="search" placeholder=".
vue中如何实现左右联动的效果？
simoon's的博客
06-21 7479
这里的坑还是蛮多的，花了一个多小时，才理清楚。 做一下笔记，以便于复习。 首先呢，需要让左右的布局都可以滚动，这里使用了betterScroll npm i better-scroll import BScroll from 'better-scroll' methods: { _initScroll () { this.menuScroll = new BScro...
Vant IndexBar 索引栏 写左右联动
fttttttt的博客
03-20 1001
<template> <van-index-bar :sticky="true" :sticky-offset-top="1" :index-list="indexList" class="anchor" sticky> <div v-for="(item,index) in cate" :key="index"> <!-- //这里的indexList[index]要和{{indexList[index]}} 一样才能触发点击事件-...
Vue实现左右菜单联动实现代码
10-18
主要介绍了Vue实现左右菜单联动实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jq+vue实现左右联动滑动，商品分类页(仿京东，美团)
weixin_41559735的博客
08-10 1622
jq+vue实现左右联动的商品分类页
商品分类左右联动
最新发布
nbin2008的博客
07-11 540
商品分类左右联动，用vue，hooks处理
vue 之 商品列表的左右联动
weixin_47409897的博客
12-19 2431
目录vue 之 商品列表的左右联动思路实现代码 vue 之 商品列表的左右联动 思路 1：初始化的时候，左右两侧实现 可以滚动 监听右侧的滚动事件，把具体的滚动y轴的值，赋值给 scrollY 2：然后计算出右侧的每一个板块的距离顶部高度，为一个高度数组 3：计算属性之中，设置当前高亮 返回当前索引 需要找到当前索引，然后根据这个高度数组，和scrollY进行比较，需要返回那个索引 4：点击左侧切换的时候，拿当前的索引号，然后再拿到右侧的滚动位置，赋值给scrollY，最后调用右侧的滚动事件
vue3左右联动分类页
cshic的博客
10-11 479
选好了
商品分类三级联动数据库
01-05
商品分类三级联动数据库，包含三个表，商品三级分类，mysql
mpvue 左右联动
04-20
类似美团的左右联动。。拖动左侧title右侧内容区滚动到相应的位置，拖动右侧内容，左侧title滚动到相应位置
vue和better-scroll实现列表左右联动效果详解
10-17
【Vue和Better-Scroll实现列表左右联动效果详解】 在Web开发中，特别是在电商或信息展示类项目中，经常需要实现列表的联动效果，即当用户在一个列表中滚动时，另一个相关的列表也会相应滚动。Vue.js作为一款轻量级...
vue使用better-scroll实现菜单列表左右联动
07-13
在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 首先，我们需要了解 Better-Scroll 的基本用法。Better-Scroll 提供了丰富的滚动功能，包括但不限于横向滚动、...
vue中实现左右联动的效果
12-04
在Vue.js中实现左右联动的效果，通常用于创建如电商应用中的商品分类与商品列表的同步滚动功能。在本文中，我们将深入探讨如何使用Better Scroll库来实现这一效果。首先，你需要通过npm安装Better Scroll库： ```...
Vue better-scroll实现商品分类左右联动
weixin_60463255的博客
11-21 1088
<section> <!-- 左边 --> <div class="list-l" ref="left"> <ul class="l-item"> <!-- 如果index == currentIndex，就给class加上active属性 --> <li v-for="(item, index) in leftData" ..
Vue中实现左右联动
m0_58301736的博客
11-23 2342
使用插件为better-scroll 在安装better-scroll插件时因为我的文件夹有中文（本地大目录，项目我不会用中文），一直报错，后面修改了文件夹名称就可以了，我也并不能很肯定是这个问题导致的报错，有知道的可以告知一声谢谢 借鉴https://segmentfault.com/a/1190000015970841 但此文章中左边菜单并没有实现监听联动，所以自己手动增加了左边菜单的监听（其实也就几句代码） 源码附上 import Scroll from '../components/scr..
走进移动端世界，实现左右菜单联动效果轻松上手（vue+better-scroll）
希望看完文章的你能够带着答案离开。
12-02 5337
走进移动端世界，实现左右菜单联动效果轻松上手（vue+better-scroll）
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值