vue结合better-scroll实现商品详情联动效果

最新推荐文章于 2023-08-03 17:05:51 发布

原创

最新推荐文章于 2023-08-03 17:05:51 发布 · 置顶 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#better-scroll #better-scroll联动 #商品详情滑动监听功能 #vue滚动插件better使用

本文介绍如何使用 Better Scroll 实现商品详情页的联动效果，包括滑动到特定位置显示顶部标签栏，点击标签栏跳转至对应内容区，并实现平滑滚动和标签激活状态切换。

better-scroll

ps：商品详情联动效果，当滑动到某个位置时出现tab标签栏，点击tab项时滑动到对应位置并激活当前类。

文章目录

- better-scroll

滑动元素吸顶.可参考

效果图

在这里插入图片描述

安装better-scroll

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

template

注意 content的高度不超过父容器的高度，是不能滚动的哦。

<template>
    <div class='goodsWrap'>
        <div class="contentList" ref="right">
            <div>
                <ul ref="r_item">
                    <li class="right-item-hook">
                        <div class="bannerBox">
                            <img src="uploads/banner/20200420/e3cd62c7c283c4e25f372bc80c446cfd.jpeg" alt="">
                        </div>

                        <div class="goodsDescBox" ref="boxItem">
                            商品描述
                            <!-- 添加测试数据撑开高度 -->
                        </div>
                    </li>
                    <li class="right-item-hook">
                        <div class="goods-detail-wrap">
                            商品详情
                             <!-- 添加测试数据撑开高度 -->
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 滑动到某个点出现置顶 tab标签 -->
        <div class="fixedBar" :style="`opacity: ${backgroundColor}`" v-show="hiddenTopBar" :class="hiddenTopBar == true ? 'isFixed' : ''">
            <div class="goBack" @click="back">
                <img src="../../assets/images/goBack_black.png" alt="">
            </div>
            <div ref="left">
                <ul class="ul" ref="l_item">
                    <li v-for="(item, index) in categoryList" :key="index" :class="{active: currentIndex == index}" @click="selectItem(index, $event)">
                        {
  
  {item.name}}
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

使用better-scroll

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

export default {
   
   
    name: "goodsDetail",
    data() {
   
   
        return {
   
   
            backgroundColor: "", //背景颜色
            hiddenTopBar: false, //是否显示tab
            categoryList: [{
   
    name: "商品" }, {
   
    name: "详情" }], //tab标签
            currentIndex: 0, //当前元素下标
        };
    },
    mounted() {
   
   
        this.$nextTick(() => {
   
   
            // 实例化 BScroll
            this._initScrollY();

            //获取右侧tops
            this._initTops();
        })
    },
    destroyed() {
   
   
        this.$refs.listScroll &&am