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>