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

爱技术爱游戏

已于 2023-10-11 11:18:53 修改

阅读量373

点赞数

分类专栏： uniapp 文章标签： uni-app 前端 javascript

于 2023-10-11 11:15:45 首次发布

本文链接：https://blog.csdn.net/qq_26711723/article/details/133763702

版权

uniapp 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

布局：

       <view class="swiperLayout">
            <!-- uview-plus3.0 组件-->
                <u-swiper @click="SwiperTo" radius="0" height="400rpx" :list="swiper_list"
                          keyName="bannerurl" circular @change="onSwiperChange" :current="currentIndex">
                </u-swiper>
                <view class="swiperTxtLayout">
                    <scroll-view class="scrollView" :scroll-x="true" @touchmove.stop :scroll-with-animation="true"
                                 :scroll-left="scrollLeft">
                        <view class="scrollItem" style="display: inline-block" v-for="(item,index) in swiper_list"
                              @click="onSwiperTxtClick(index)">
                            <view class="spTxtLeftNormal" v-if="index == 0&&currentIndex != index">
                                {{ item.title }}
                            </view>
                            <view class="spTxtRightNormal"
                                  v-else-if="index == swiper_list.length-1&&currentIndex != index">
                                {{ item.title }}
                            </view>
                            <view class="spTxtNormal" v-else-if="currentIndex != index"> {{ item.title }}</view>
                            <view class="spTxtSelect" v-else> {{ item.title }}</view>
                        </view>
                    </scroll-view>
                </view>
            </view>

样式：


.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
            }
        })
    }