uni-app scroll-view 点击实现元素居中？

分手后的思念是犯贱 2022-09-11 15:12 323阅读 0赞

## 前言 ##

在 uni-app 开发中  scroll-view 组件用到几率也是比较大滴，存在问题主要是：点击子元素，子元素在什么位置展示？

今天我们来好好总结一下 0.0~

## Part.1  可能出现的需求 ##

效果一：当前点击子元素靠左展示

![e418d28d7bb62a39b452d2dce93fd7cb.gif][]

效果二：当前点击子元素靠左留一展示

![3d4249ed35d2b22f436e6a41350e1f91.gif][]

效果三：当前点击子元素居中展示

![c098923767a6d6801382589ab06b8fbf.gif][]

应该常见的用户体验效果就这三种了，我们看看怎么实现？go~

## Part.2  我的思路 ##

在 uni-app 的官方( [uni-app官网][uni-app] ) API中对 [scroll-view][] 组件有详细的介绍和属性说明，今天我们主要用到的属性是：scroll-left (设置横向滚动条的位置)

一般偷懒或者常用的方式是使用 scroll-into-view 这个属性，随着当前点击元素的ID滚动，但是这个属性制作出来后会和我上面 效果一 一样靠左展示，这种展示方式体验不是太好(从前往后点击可能还好，但是从后往前就很...)，这种方式配合 swiper 或者其它组件做长列表或者其它还可勉强接受，因为不用去点击，直接手动滑动就可切换。但是假如不存在手可滑动的话，就会很糟糕。

接下来我们具体来看看，这三种效果如何实现：

效果一： 可直接使用 scroll-into-view 属性实现  或者 也可使用  scroll-left

思路：第一种， scroll-into-view 绑定一个动态 ID，子元素循环产出ID，点击时进行绑定(这次就不做代码产出了)

第二种， 计算每个子元素的宽度，点击时获取当前点击元素前面的元素宽度之和

效果二：使用  scroll-left

思路：计算每个子元素的宽度，点击时获取当前点击元素索引 - 1 的前面元素宽度之和，相比于效果一的第二种情况，这里少算当前点击元素前面的一个元素的宽度，实现留一

效果三：使用  scroll-left

思路：当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 实现居中展示

## Part.3  代码实现 ##

<template>
        <view class="lxy-content">
            <scroll-view scroll-x="true"
                         class="content-scroll"
                         scroll-with-animation
                         :scroll-left="scrollLeft">
                <view v-for="(item, index) in category"
                      :key="index"
                      class="scroll-item"
                      @click="changeTitle(index)">
                    <text class="item-text"
                          :class="curIndex == index? 'active' : ''">{
       {item.name}}</text>
                </view>
            </scroll-view>
        </view>
    </template>

<script>
        export default {
            data() {
                return {
                    category: [
                        {
                            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: '星期十'
                        }
                    ],
    
                    contentScrollW: 0, // 导航区宽度
                    curIndex: 0, // 当前选中
                    scrollLeft: 0, // 横向滚动条位置
                }
            },
            mounted() {
                // 获取标题区域宽度，和每个子元素节点的宽度
                this.getScrollW()
            },
            methods: {
                // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
                getScrollW() {
                    const query = uni.createSelectorQuery().in(this);
    
                    query.select('.content-scroll').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.category[i].left = data[i].left;
                            //  scroll-view 子元素组件宽度
                            this.category[i].width = data[i].width
                        }
                    }).exec()
                },
    
    
                // 选择标题
                changeTitle(index) {
                    this.curIndex = index;
    
                    // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
                    this.scrollLeft = index  * this.category[index].width
    
                    // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
                    /* this.scrollLeft = 0;
                    for (let i = 0; i < index; i++) {
                        this.scrollLeft += this.category[i].width
                    }; */
    
    
                    // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
                    /* this.scrollLeft = (index - 1)  * this.category[index].width */
    
                    // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
                    /* this.scrollLeft = 0;
                    for (let i = 0; i < index - 1; i++) {
                        this.scrollLeft += this.category[i].width
                    }; */
    
    
                    // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
                    /* this.scrollLeft = this.category[index].left - this.contentScrollW / 2 + this.category[index].width / 2; */
    
                }
            }
        }
    </script>

<style lang="scss" scoped>
        .lxy-content {
            width: 100%;
            height: 100rpx;
            margin-top: 50rpx;
            box-sizing: border-box;
            .content-scroll {
                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;
                        &.active {
                            color: #1468FF;
                        }
                    }
                }
            }
        }
    </style>

[e418d28d7bb62a39b452d2dce93fd7cb.gif]: /images/20220828/42f01c48289b446392e57a47f2228894.png
[3d4249ed35d2b22f436e6a41350e1f91.gif]: /images/20220828/7c60067281d04b2aaa714542cc0b42dd.png
[c098923767a6d6801382589ab06b8fbf.gif]: /images/20220828/a640ab2730cf450db15adf1f55507fc0.png
[uni-app]: https://uniapp.dcloud.io/component/scroll-view
[scroll-view]: https://uniapp.dcloud.io/component/scroll-view?id=scroll-view

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 点击富文本元素图片可以预览（非nvue）

我使用的是uniapp 官方推荐的组件 rich-text，一般我能用官方级用官方，更有保障一些。

曾经终败给现在/ 2024年04月22日 15:19/ 0 赞/ 120 阅读

相关 uniapp小程序点击分享

可以使用uniapp的onShareAppMessage钩子函数来实现小程序分享功能。在需要分享的页面的json文件中配置如下内容： {

墨蓝/ 2024年03月25日 08:57/ 0 赞/ 90 阅读

相关 uniapp旋转动画 uniapp 实现点击图标旋转90度

本文章实现的效果是：点击按钮，图标顺时针旋转90度，再点击时，逆时针旋转回去，效果图如下： ![在这里插入图片描述][025f11e2f411456dacaeda93265

末蓝、/ 2023年10月09日 16:14/ 0 赞/ 33 阅读

相关实现点击元素上传文件

效果图：点击虚线框内任意位置可以上传文件。 ![在这里插入图片描述][20191030171809771.png] 实现过程： div和input大小设置一样，

我不是女神ヾ/ 2023年06月11日 12:23/ 0 赞/ 12 阅读

相关 scorll view 实现点击元素，元素居中显示

这个方法是在百度借鉴的，原文章地址：[https://www.cnblogs.com/langxiyu/p/13159055.html][https_www.cnblogs

一时失言乱红尘/ 2022年12月20日 12:43/ 0 赞/ 14 阅读

相关 uni-app scroll-view 点击实现元素居中？

前言在 uni-app 开发中 scroll-view 组件用到几率也是比较大滴，存在问题主要是：点击子元素，子元素在什么位置展示？今天我们来好好总结一下 0.0

分手后的思念是犯贱/ 2022年09月11日 15:12/ 0 赞/ 324 阅读

相关五花八门实现元素居中

这篇文章很早就想写了，一直拖到现在，终于动手了，哈哈；水平居中 1. 行内元素：在其父元素上设置 text-align:center; 2.

骑猪看日落/ 2022年06月15日 12:56/ 0 赞/ 174 阅读

相关点击子元素却也触发父元素的点击事件

> 在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较

╰半橙微兮°/ 2022年03月17日 12:44/ 0 赞/ 642 阅读

相关 uniapp地图-点击添加标记点

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPa

迈不过友情╰/ 2021年08月19日 13:27/ 0 赞/ 3152 阅读

相关 uniapp 点击号码到拨号页面

一句代码搞定在手机中才可以实现效果!!! methods:{ //拨打电话 callphone() { uni.mak

拼搏现实的明天。/ 2021年07月26日 02:48/ 0 赞/ 704 阅读