uni-app 自定义组件之菜单左右滑动并点击切换选中居中显示

效果图：

 一、

1.思路：计算每个子元素的宽度，点击时获取当前点击元素索引，当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 实现居中展示。

一些简单数据说明：

 2.自定义组件HuaDongScrollviewCenter文件代码：

<template name="HuaDongScrollviewCenter">
    <view class="center-cut-menu">
        <scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
            <view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
                <text class="item-text" :class="curIndex == index? 'active' : ''">{ {item.name}}</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "HuaDongScrollviewCenter",
        data() {
            return {
                contentScrollW: 0, // 导航区宽度
                curIndex: 0, // 当前选中