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, // 当前选中
                scrollLeft: 0, // 横向滚动条位置
            };
        },
        mounted() {
            // 获取标题区域宽度，和每个子元素节点的宽度
            this.getScrollW()
        },
        props: {
            list: {} //数据集合
        },
        methods: {
            // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
            getScrollW() {
                let query = uni.createSelectorQuery().in(this);
                query.select(‘.scroll-view’).boundingClientRect(data => {
                    // 拿到 scroll-view 组件宽度
                    this.contentScrollW = data.width
                }).exec();

                query.selectAll(‘.scroll-item’).boundingClientRect(data => {
                    let dataLen = data.length;
                    for (let i = 0; i < dataLen; i++) {
                        //  scroll-view 子元素组件距离左边栏的距离
                        this.list[i].left = data[i].left;
                        //  scroll-view 子元素组件宽度
                        this.list[i].width = data[i].width
                    }
                }).exec()
            },

            // 选择标题
            changeMenu(index) {
                var _this = this
                _this.curIndex = index;

                // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
                // _this.scrollLeft = index * _this.list[index].width

                // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
                // _this.scrollLeft = 0;
                // for (let i = 0; i < index; i++) {
                //     _this.scrollLeft += _this.list[i].width
                // };

                // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
                // _this.scrollLeft = (index – 1)  * _this.list[index].width

                // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
                // _this.scrollLeft = 0;
                // for (let i = 0; i < index – 1; i++) {
                //     _this.scrollLeft += _this.list[i].width
                // };

                // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
                _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.文件放置的路径：

 4.将点击的位置传递给父组件：

 二、父组件

1.自定义组件的引用与注册

 2.自定义组件使用

 3.父组件的整体代码：

<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: ‘星期一’
                    },
                    {
                        id: 2,
                        name: ‘星期二’
                    },
                    {
                        id: 3,
                        name: ‘星期三’
                    },
                    {
                        id: 4,
                        name: ‘星期四’
                    },
                    {
                        id: 5,
                        name: ‘星期五’
                    },
                    {
                        id: 6,
                        name: ‘星期六’
                    },
                    {
                        id: 7,
                        name: ‘星期七’
                    },
                    {
                        id: 8,
                        name: ‘星期八’
                    },
                    {
                        id: 9,
                        name: ‘星期九’
                    },
                    {
                        id: 10,
                        name: ‘星期十’
                    }
                ],
            }
        },
        methods: {
            scrollViewClick: function(index) {
                var _this = this
                console.log(“选中位置 index = ” + index)
                console.log(“选中内容 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下载

 相同的文章：uni-app使用scrollview+swiper实现滑动切换页面功能