better-scroll技术总结

使用Better Scroll实现复杂页面滚动

原创

已于 2022-03-23 15:58:26 修改 · 1.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#better-scroll #uniapp #vue.js

于 2019-12-10 16:27:41 首次发布

本文介绍如何利用Better Scroll库实现复杂的页面滚动效果，包括导航条与内容区的联动滚动、标题栏的水平滚动及数据区的垂直滚动。通过实例代码详细展示了Better Scroll的配置与使用方法。

在这里插入图片描述

需要实现的功能：
1 从首页跳进列表页，传入index参数，nav要根据index值滚动到对应的dom位置
2 点击 nav => 触发点击的dom滚动到顶部，（每次点击nav，data和title都需要初始化滚动位置）
3 data数据更新，title数据更新
4 点击 title => title 可以横向滚动，data数据也要滚动到与title对应的数据位置

npm：
npm install better-scroll --save
页面中引入：
import BScroll from ‘better-scroll’

页面布局

<template>
    <div class="content">
        <!-- 1. nav -->
        <div class="nav_Warp">
            <ul>
                <li ref="nav_li" :class="{nav_active:nav_active == index}" @click="change_nav_active(index)" v-for="(item,index) in nav_list" :key="index">{
  
  {item}}</li>
            </ul>
        </div>
        
        <!-- 2. title + data -->
        <dataWarp :list="data_list"></dataWarp>
    </div>
</template>
<style scoped lang="less">
    .content{
        display: flex;
        .nav_Warp {
            width: 20%;
            background: #f4f4f4;
            height: 95vh;
            overflow: hidden;
            ul {
                overflow: scroll;
                padding-bottom: 50px;
                li {
                    padding-left: 10px;
                    border-left: 2px solid #f4f4f4;
                    text-align: left;
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid #e8e9e8;
                    font-size: 12px;
                }
                .left_active{
                    border-left: 2px solid #3cb963;
                    font-size: 12px;
                    font-weight: bold;
                    color: #333333;
                    background: #fff;
                }
            }
        }
    }

</style>

// nav 初始化
<script>
    import BScroll from 'better-scroll' // 引入BScroll 
    import dataWarp from './dataWarp ' // 引入 dataWarp组件
    export default {
   
   
        components: {
   
   
            dataWarp,
        },
        data() {
   
   
            return {
   
   
                nav_list:[],// nav 列表数据
                data_list:[],// data + title 商品数据
                nav_active:0,// nav 高亮位置,默认第一索引0
            }
        },
        mounted() {
   
   
            // 初始化数据
            this._initData();
            // 如果首页跳转到列表页面 路由携带有参数，则200毫秒后触发nav滚动事件
            if(this.$route.query.currentIndex){
   
   
                setTimeout(()=>{
   
   
                    this.change_nav_active(this.$route.query.currentIndex)
                },200)
            }
        },
        methods: {
   
   
            // 1. 初始化操作(数据和界面)
            _initData() {
   
   
                this.$nextTick(() => {
   
   
                    if (!this.leftScroll) {
   
   
                        this.leftScroll = new