export default {
data() {
return {
height_home: 0,
swiperHeight: 0,
}
}
//获取高度时有时会获取失败,所以这里要预先执行
onReady() {
this.getSysHeight();
},
methods: {
//获取屏幕信息
getSystemInfo() {
let that = this;
uni.getSystemInfo({
success: res => {
// console.log("获取手机参数信息");
// console.log(res);
that.height_home = res.windowHeight;
// const query = uni.createSelectorQuery() // query 是 SelectorQuery 对象
// query.select('.footer').boundingClientRect() // select 后是 NodesRef 对象,然后 boundingClientRect 返回 SelectorQuery 对象
// query.exec(function(res) { // exec 返回 NodesRef 对象
// // console.log(res[0].top);
// console.log("获取元素");
// console.log(res);
// that.swiperHeight = res[0].height;
// // #the-id节点的上边界坐标
// // res[1].scrollTop // 显示区域的竖直滚动位置
// // that.swiperHeight = top
uni.setStorageSync('SystemInfo',res);
that.getSysHeight();
// })
}
})
},
getSysHeight() {
let that = this;
let info = uni.createSelectorQuery().select('.footer');
info.boundingClientRect(data => {
// console.log("获取元素宽度");
// console.log(data);
if (data) {
if (data.height && data.height == '' || data.height && data.height == null || data.height && data.height ==
'null') {
that.getSysHeight();
}
that.swiperHeight = data.height;
}
// console.log("swiper的高度" + that.swiperHeight);
}).exec();
},
<view class="home" :style="{ height: height_home +'px' }"> <view class="footer"> <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-item2" :style="{height:swiperHeight+'px'}"> <swiper-item v-for="(ite,inde) in tabs"> <scroll-view scroll-y :style="{height:swiperHeight+'px'}"></scroll-view> </swiper-item> </swiper> </view> </view>