uniapp获取标签距离页面顶部的高度,并计算出页面的剩余高度。自适应剩余页面高度,动态设置剩余页面高度。

获取元素距离顶部的高度:

let that=this;
const query = uni.createSelectorQuery();
query.select('.swiper').boundingClientRect(); //.swiper是swiper类名,获取当前swiper距离顶部的位置
query.exec(res => {
  console.log('swiper距离页面顶部的距离', res[0].top);
});

获取页面总体高度并计算剩余页面的高度:

data() {
  return {
    swiperHeight: '',//页面剩余高度,用于动态赋值
  };
},
mounted() {
  let that=this;
  uni.getSystemInfo({
    success: resu => {
      // resu 可以获取当前屏幕的高度
      const query = uni.createSelectorQuery();
      query.select('.swiper').boundingClientRect(); //.swiper是swiper类名,获取当前swiper距离顶部的位置
      query.exec(res => {
  	  that.swiperHeight = resu.windowHeight - res[0].top + 'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
        console.log('页面的剩余高度', that.swiperHeight);
      });
    },
    fail: res => {}
  });
}

最后动态设置标签的高度:


	

你可能感兴趣的:(uniApp,uView,javascript,前端,vue.js)