Slide the menu of uni app custom components left and right and click switch to select and display in the middle

design sketch ：

  One 、

1. Ideas ： Calculate the width of each child element , Get the index of the currently clicked element when clicking , The distance between the currently clicked child element and the left column - scroll-view Half the width   + Half the width of the currently clicked child element Center display .

Some simple data explanation ：

 2. Custom components HuaDongScrollviewCenter File code ：

<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, // Navigation area width
                curIndex: 0, // The current selection
                scrollLeft: 0, // Horizontal scroll bar position
            };
        },
        mounted() {
            // Get the width of the title area , And the width of each child element node
            this.getScrollW()
        },
        props: {
            list: {} // Data set
        },
        methods: {
            // Get the width of the title area , And the width of each child element node and the distance from the element to the left column
            getScrollW() {
                let query = uni.createSelectorQuery().in(this);
                query.select('.scroll-view').boundingClientRect(data => {
                    // Get scroll-view Component width
                    this.contentScrollW = data.width
                }).exec();

                query.selectAll('.scroll-item').boundingClientRect(data => {
                    let dataLen = data.length;
                    for (let i = 0; i < dataLen; i++) {
                        //  scroll-view The distance from the sub element component to the left column
                        this.list[i].left = data[i].left;
                        //  scroll-view Sub element component width
                        this.list[i].width = data[i].width
                    }
                }).exec()
            },

            // Choose the title
            changeMenu(index) {
                var _this = this
                _this.curIndex = index;

                // Effect 1 ( Currently, click the sub element to display on the left )   limitations ： The child elements have the same width
                // _this.scrollLeft = index * _this.list[index].width

                // Effect 1 ( Currently, click the sub element to display on the left )   Different width of child elements can also be realized
                // _this.scrollLeft = 0;
                // for (let i = 0; i < index; i++) {
                //     _this.scrollLeft += _this.list[i].width
                // };

                // Effect two ( Currently click on the child element to leave a display on the left )   limitations ： The child elements have the same width
                // _this.scrollLeft = (index - 1)  * _this.list[index].width

                // Effect two ( Currently click on the child element to leave a display on the left )   Different width of child elements can also be realized
                // _this.scrollLeft = 0;
                // for (let i = 0; i < index - 1; i++) {
                //     _this.scrollLeft += _this.list[i].width
                // };

                // Effect three ( The currently clicked sub elements are displayed in the middle )   It is not affected by the width of child elements
                _this.scrollLeft = _this.list[index].left - _this.contentScrollW / 2 + _this.list[index].width / 2;
                _this.$emit("scrollViewClick", index)
            }
        }

    }
</script>

<style lang="scss">
    scroll-view ::-webkit-scrollbar {
        display: none;
    }

    .center-cut-menu {
        width: 100%;
        height: 100rpx;
        box-sizing: border-box;

        .scroll-view {
            height: 100rpx;
            white-space: nowrap;

            .scroll-item {
                height: 100rpx;
                padding: 0 20rpx;
                display: inline-block;
                text-align: center;

                .item-text {
                    font-size: 30rpx;
                    line-height: 100rpx;
                    padding-bottom: 10rpx;

                    &.active {
                        color: #1468FF;
                        border-bottom: 5rpx solid #1468FF;
                    }
                }
            }
        }
    }
</style>
 

3. File placement path ：

 4. Pass the clicked position to the parent component ：

  Two 、 Parent component

1. Custom component reference and registration

 2. Custom components use

 3. The overall code of the parent component ：

<template>
    <view class="content">
        <hdScrollview :list="list" @scrollViewClick="scrollViewClick"></hdScrollview>
    </view>
</template>

<script>
    import hdScrollview from "../../components/HuaDongScrollviewCenter.vue"
    export default {
        components: {
            hdScrollview
        },
        data() {
            return {
                list: [{
                        id: 1,
                        name: ' Monday '
                    },
                    {
                        id: 2,
                        name: ' Tuesday '
                    },
                    {
                        id: 3,
                        name: ' Wednesday '
                    },
                    {
                        id: 4,
                        name: ' Thursday '
                    },
                    {
                        id: 5,
                        name: ' Friday '
                    },
                    {
                        id: 6,
                        name: ' Saturday '
                    },
                    {
                        id: 7,
                        name: ' Sunday '
                    },
                    {
                        id: 8,
                        name: ' Tuesday '
                    },
                    {
                        id: 9,
                        name: ' Saturday '
                    },
                    {
                        id: 10,
                        name: ' 星期十 '
                    }
                ],
            }
        },
        methods: {
            scrollViewClick: function(index) {
                var _this = this
                console.log(" Selected location index = " + index)
                console.log(" Select content content = " + _this.list[index].name)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: white;
    }

    page {
        background-color: white;
    }
</style>
 

Demo download

  Same article ：uni-app Use scrollview+swiper Realize the function of sliding and switching pages