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>