关于uniapp:uniapp-swiper

swiper 切换

知识点：获取页面 / 组件高度

// 重点
let info = uni.createSelectorQuery().select(".swiper-item");
info.boundingClientRect(function(data) { //data - 各种参数
    _this.sceneH = data.height // 获取元素宽度
    console.log(data.height,'bbbbbbbbbbb')
}).exec()

swiper 轮播 监听高度

// swiper 切换此函数被监听
swiperChange(e) {
   let _this = this
   this.selectStatus = e.detail.current;
   
   
   if (e.detail.current == 0) {
        // 重点
        let info = uni.createSelectorQuery().select(".swiper-item");
        info.boundingClientRect(function(data) { //data - 各种参数
            _this.sceneH = data.height // 获取元素宽度
            console.log(data.height,'bbbbbbbbbbb')
        }).exec()}
   if (e.detail.current == 1) {let info = uni.createSelectorQuery().select(".swiper-item2");
        console.log(info)
        info.boundingClientRect(function(data) { //data - 各种参数
        console.log(data)
            _this.sceneH = data.height // 获取元素宽度
            console.log(data.height,'aaaaaaaaaaaaaaaaaaaaaa')
        }).exec()}           
}, 

页面 全副写法

<template>
    <view class="collectWrapper">
        <view class="tabbar">
            <view :class="selectStatus == 0 ?'selectStatus':'' "@tap="changeTabs(0)">tabs1</view>
            <view :class="selectStatus == 1 ?'selectStatus':'' "@tap="changeTabs(1)">tabs2</view>
            <view :class="selectStatus == 2 ?'selectStatus':'' "@tap="changeTabs(2)">tabs2</view>
        </view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :duration="duration" @change="swiperChange" :current="currentVal">
                        <swiper-item><view class="swiper-item"> 内容区域一 </view></swiper-item>
                        <swiper-item><view class="swiper-item"> 内容区域二 </view></swiper-item>
                        <swiper-item><view class="swiper-item"> 内容区域三 </view></swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {data() {
        return {background: ['color1', 'color2', 'color3'],
            duration: 500,
            // 管制 swiper 的显示
            currentVal: 0,
            // 顶部 tabs 显示状态
            selectStatus: 0,
        }
    },
    methods: {
        // 点击顶部 tabs 触发该函数
        changeTabs(i) {
            this.currentVal = i;
            this.selectStatus = i;
        },
        // swiper 切换此函数被监听
        swiperChange(e) {this.selectStatus = e.detail.current;},
    }
}
</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
}
.selectStatus {color: rgba(19, 149, 244, 1);
    border-bottom: 4rpx solid rgba(19, 149, 244, 1);
}
.collectWrapper {
    // 确保 swiper 内容填满设施，若需自适应只需勾销掉 100% 即可
    width: 100%;
    height: 100%;
    .tabbar {
        width: 100%;
        height: 70rpx;
    }
    .uni-padding-wrap {
        height: 100%;
        .page-section-spacing {height: 100%;}
        .swiper {height: 100%;}
    }
}
</style>