unapp 轮播图自定义文本自动跟随切换（支持H5、APP）

布局：

       
            
                
                
                
                    
                        
                            
                                {{ item.title }}
                            
                            
                                {{ item.title }}
                            
                             {{ item.title }}
                             {{ item.title }}
                        
                    
                
            

样式：

.swiperLayout {
    width: 100%;
    position: relative;
}

.swiperTxtLayout {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.scrollView {
    width: 100%;
    white-space: nowrap;
}

:deep(.uni-scroll-view-content) {
    display: inline-flex;
    align-items: flex-end;
}

.spTxtNormal {
    background: rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    padding: 12rpx 30rpx;
    letter-spacing: 1rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 3rpx rgba(0, 0, 0, 0.8);
}

.spTxtLeftNormal {
    background: rgba(51, 51, 51, 0.3);
    border-radius: 10rpx 0 0;
    box-sizing: border-box;
    padding: 12rpx 30rpx;
    letter-spacing: 1rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 3rpx rgba(0, 0, 0, 0.8);
}

.spTxtRightNormal {
    background: rgba(51, 51, 51, 0.3);
    border-radius: 0 10rpx 0 0;
    box-sizing: border-box;
    padding: 12rpx 30rpx;
    letter-spacing: 1rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 3rpx rgba(0, 0, 0, 0.8);
}

.spTxtSelect {
    text-align: center;
    background: rgba(51, 51, 51, 0.5);
    border-radius: 10rpx 10rpx 0 0;
    box-sizing: border-box;
    padding: 13rpx 30rpx;
    letter-spacing: 1rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 3rpx rgba(0, 0, 0, 0.8);
}

逻辑：

    const currentIndex = ref(0)
    let scrollLeft = ref(0)
    const contentScrollW = ref(0)
    let swiper_list = ref([])//轮播图数组

    //轮播图改变监听
    const onSwiperChange = (res) => {
        currentIndex.value = res.current

        // 子元素居中展示
        scrollLeft.value = swiper_list.value[res.current].left - contentScrollW.value / 2 + swiper_list.value[res.current].width / 2;
    }

    //点击轮播图文本
    const onSwiperTxtClick = (index) => {
        currentIndex.value = index

        // 子元素居中展示
        scrollLeft.value = swiper_list.value[index].left - contentScrollW.value / 2 + swiper_list.value[index].width / 2;
    }

    //（轮播图初始化完成后调用） 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
    const getScrollW = () => {
        // let query = uni.createSelectorQuery().in(proxy);
        // query.select('.scrollView').boundingClientRect(data => {
        //     // 拿到 scroll-view 组件宽度
        //     contentScrollW.value = data.width
        // }).exec();
        //
        // query.selectAll('.scrollItem').boundingClientRect(data => {
        //     for (let i = 0; i < data.length; i++) {
        //         //  scroll-view 子元素组件距离左边栏的距离
        //         swiper_list.value[i].left = data[i].left;
        //         //  scroll-view 子元素组件宽度
        //         swiper_list.value[i].width = data[i].width
        //     }
        // }).exec()

        uni.createSelectorQuery().select('.scrollView').boundingClientRect().exec((ret) => {
            // 拿到 scroll-view 组件宽度
            contentScrollW.value = ret[0].width
        })

        uni.createSelectorQuery().selectAll('.scrollItem').boundingClientRect().exec((ret) => {
            let data = ret[0]
            for (let i = 0; i < data.length; i++) {
                //  scroll-view 子元素组件距离左边栏的距离
                swiper_list.value[i].left = data[i].left;
                //  scroll-view 子元素组件宽度
                swiper_list.value[i].width = data[i].width
            }
        })
    }