uni-app scroll-view 點擊實現元素居中？

前言

在 uni-app 開發中  scroll-view 組件用到幾率也是比較大滴，存在問題主要是：點擊子元素，子元素在什么位置展示？

今天我們來好好總結一下 0.0~

Part.1  可能出現的需求

效果一：當前點擊子元素靠左展示

 

效果二：當前點擊子元素靠左留一展示

 

效果三：當前點擊子元素居中展示

 

應該常見的用戶體驗效果就這三種了，我們看看怎么實現？go~

 

Part.2  我的思路

在 uni-app 的官方( https://uniapp.dcloud.io/component/scroll-view ) 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>