vue中如何使用better-scroll滚动插件实现横向拖动

npm install better-scroll --save

<template>
    <div class="mapLine">
        <!-- 时间 -->
        <div
            class="time-content"
            v-show="timeShowFlag"
            :class="[
                'left-content',
                'animate__animated',
                timeFold ? 'animate__slideInUp' : 'animate__slideOutDown',
            ]"
        >
            <div class="time-scroll" ref="timeScroll">
                <div class="time-box" ref="timebox">
                    <div
                        class="time-item"
                        v-for="(item, index) in timeList"
                        @click="timeClickHandle(index)"
                        :key="item"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="close-btn" @click="closeClickHandle('time')">
                <i class="el-icon-d-arrow-left"></i>
            </div>
        </div>

        <!--缩略图-->
        <div
            class="img-content"
            v-show="imgShowFlag"
            :class="[
                'left-content',
                'animate__animated',
                imgFold
                    ? 'animate__zoomIn animate__slideInLeft'
                    : 'animate__zoomOut animate__slideOutLeft',
            ]"
        >
            <div class="img-scroll" ref="imgScroll">
                <div class="image-box" ref="imgBox">
                    <el-image
                        class="el-img"
                        draggable="false"
                        fit="cover"
                        @click="handleImgClick(index)"
                        v-for="(item, index) in imgList"
                        :key="index"
                        :src="item"
                    />
                </div>
            </div>
            <div class="close-btn" @click="closeClickHandle('img')">
                <i class="el-icon-d-arrow-left"></i>
            </div>
        </div>

        <!--大图-->
        <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="viewerImgList"
        />
    </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import Bscroll from "better-scroll";

export default {
    components: {
        ElImageViewer,
    },
    data() {
        return {
            timeShowFlag: true,
            timeFold: true,
            imgShowFlag: false,
            imgFold: false,
            scroll: "",
            imagescroll: "",
            showViewer: false,
            viewerImgList: [],
            imgList: [
                //图片
            ],
            viewerVideoList: [],
            videoList: [
                //视频
            ],
            timeList: [
                2000,111,1112
            ],
        };
    },
    mounted() {
        
    },
    destroyed() {
        this.timeShowFlag = false;
        this.imgShowFlag = false;
    },
    watch: {
        timeShowFlag(val) {
            //   console.log(val);
        },
    },
    methods: {
        // 点击图片 显示时间轴
        showHand(val) {
            if (val) {
                if (this.timeList.length == 0) {
                    this.$message({
                        message: "暂无图片！",
                        type: "warning",
                    });
                    return false;
                }

                this.$nextTick(() => {
                    this.timeScroll();
                });
            } else {
                this.imgShowFlag = false;
            }
            this.timeShowFlag = val;
        },
        // 点击按钮 显示时间轴  获取图片时间轴
        timeShowHandle(objectid) {
                    this.timeList =["http://120.221.72.79:9090/picture/around-sea/upload/picture/4ef5156d2edc4f24a75bbb8daa840927.jpeg","http://120.221.72.79:9090/picture/around-sea/upload/picture/b0b769fc6e4b4852b2a54716df577f86.jpeg"];
                    this.timeFold = true;
                    this.$nextTick(() => {
                        this.timeScroll();
                    });
               
        },
        // 初始化时间轴横向滚动
        timeScroll() {
            // 默认有六个li子元素，每个子元素的宽度为120px
            let i = this.timeList.length;
            let width = i * 97;
            this.$refs.timebox.style.width = width + "px";
            // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new Bscroll(this.$refs.timeScroll, {
                        startX: 0,
                        click: true,
                        scrollX: true,
                        // 忽略竖直方向的滚动
                        scrollY: false,
                        eventPassthrough: "vertical",
                    });
                } else {
                    this.scroll.refresh();
                    this.$refs.timebox.style.transform = "translateX(0px)";
                }
            });
        },
        // 初始化图片横向滚动
        imgScroll() {
            // 默认有六个li子元素，每个子元素的宽度为120px
            let i = this.imgList.length;
            let j = this.videoList.length;
            let width = i * 112 + j * 300;
            this.$refs.imgBox.style.width = width + "px";

            // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
            this.$nextTick(() => {
                if (!this.imagescroll) {
                    this.imagescroll = new Bscroll(this.$refs.imgScroll, {
                        startX: 0,
                        click: true,
                        scrollX: true,
                        // 忽略竖直方向的滚动
                        scrollY: false,
                        eventPassthrough: "vertical",
                    });
                } else {
                    this.imagescroll.refresh();
                    this.$refs.imgBox.style.transform = "translateX(0px)";
                }
            });
        },

        // 点击时间轴
        timeClickHandle(i) {
            for (let i = 0; i < 12; i++) {
                if(i%2==0){
                     this.imgList.push("http://120.221.72.79:9090/picture/around-sea/upload/picture/4ef5156d2edc4f24a75bbb8daa840927.jpeg") 
                }else{
                    this.imgList.push("http://120.221.72.79:9090/picture/around-sea/upload/picture/b0b769fc6e4b4852b2a54716df577f86.jpeg") 
                }
                
            }
            this.imgFold = true;
            this.imgShowFlag = true;

            this.$nextTick(() => {
                this.imgScroll();
            });
        },
        // 点击图片
        handleImgClick(index) {
            this.showViewer = true;
            let tempImgList = [...this.imgList];
            let temp = [];
            for (let i = 0; i < index; i++) {
                temp.push(tempImgList.shift());
            }
            this.viewerImgList = tempImgList.concat(temp);
        },
        // 点击视频
        handleVideoClick(index) {
            // this.showViewer = true;
            // let tempImgList = [...this.videoList];
            // let temp = [];
            // for (let i = 0; i < index; i++) {
            //     temp.push(tempImgList.shift());
            // }
            // this.viewerVideoList = tempImgList.concat(temp);
        },
        // 放大图片 关闭事件
        closeViewer() {
            this.showViewer = false;
        },
        // 点击关闭按钮
        closeClickHandle(type) {
            if (type == "time") {
                this.timeFold = false;
            } else if (type == "img") {
                this.imgFold = false;
            }
        },
    },
};
</script>

<style lang="scss">
.mapLine {
    position: relative;
    top: 200px;
    -moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    // 时间轴
    .time-content {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 16px;
        left: 120px;
        max-width: 82%;
        z-index: 100;
        .time-scroll {
            flex: 1;
            overflow: scroll;
            &::-webkit-scrollbar {
                display: none; /* Chrome Safari */
            }
            .time-box {
                display: flex;
                align-items: center;
                .time-item {
                    color: #ffffff;
                    width: 85px;
                    white-space: nowrap;
                    background-color: rgba(3, 12, 56, 0.78);
                    border: solid 1px #3cddff;
                    margin: 0 6px;
                    padding: 4px 8px;
                    cursor: pointer;
                }
            }
        }
    }
    .close-btn {
        width: 25px;
        line-height: 100px;
        background-color: rgba(3, 12, 56, 0.78);
        border: solid 1px #3cddff;
        cursor: pointer;
        text-align: center;
        margin-left: 4px;
        i {
            color: #3cddff;
        }
    }
    .time-content {
        .close-btn {
            line-height: 25px;
            i {
                color: #ffffff;
                transform: rotate(-90deg);
            }
        }
    }
    // 图片
    .img-content {
        position: absolute;
        bottom: 60px;
        left: 116px;
        max-width: 88%;
        display: flex;
        align-items: center;
        z-index: 1000;
        .img-scroll {
            flex: 1;
            overflow: scroll;
            &::-webkit-scrollbar {
                display: none; /* Chrome Safari */
            }
            .image-box {
                display: flex;
                align-items: center;
                .el-img {
                    width: 100px;
                    height: 100px;
                    // border: solid 1px #3cddff;
                    margin: 0 10px;
                    cursor: pointer;
                    box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
                }
                video {
                    width: 290px;
                    margin: 0 5px;
                    height: 180px;
                }
            }
        }
    }
    .el-image-viewer__wrapper {
        z-index: 9999999 !important;
    }
}
</style>