uniapp之swiper与scroll结合实现swiper动态高度


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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM