uniapp轮播图高度随变和左右滑动也获取高度

简介: uniapp轮播图高度随变和左右滑动也获取高度

排版代码

<view class="zonglistSwiperHeight" :style="{'height': swiperHeight +'px'}">
//tab栏
      <view>
        <u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" :current="current" @change="tabsChange" swiperWidth="750"></u-tabs-swiper>
      </view>
      //轮播图
      <swiper class="listSwiperHeight" ref="listHeight" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-items"  >
          <scroll-view :scroll-y="false" :style="{'height':$attrs.height + 'px','width': '100%', 'display':'contents'}" @scrolltolower="onreachBottom">
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item" >
          <scroll-view :scroll-y="false" :style="{'height':$attrs.height + 'px','width': '100%', 'display':'contents'}" @scrolltolower="onreachBottom"></scroll-view>
        </swiper-item>
      </swiper>
    </view>

根据tab获取高度代码

//第一个
setHeight() {
//获取元素
        var query =  uni.createSelectorQuery();
        //打印当前的数据个数
        console.log(this.mockRowData.length)
        //赋值
         var moleng =  this.mockRowData.length;
         //获取元素并执行的方法
      query.select('.swiper-items').boundingClientRect(rect => {
      //数据个数乘以当前每个轮播体的高
          let listHei = moleng * rect.height;
          console.log('轮播图高度为', listHei)
          赋值给总高度
          this.swiperHeight = listHei;
        }).exec();
        console.log('wuwuwu')
      },
      //第二个  解释如上
      TosetHeight() { 
        var query = uni.createSelectorQuery();
        console.log(this.TomockRowData.length)
        var moleng = this.TomockRowData.length;
        query.select('.swiper-item').boundingClientRect(rect => {
          let listHei = moleng * rect.height;
          console.log('轮播图高度为160', listHei)
          this.swiperHeight = listHei;
        }).exec();
      },

tab栏触发

// tabs通知swiper切换
      tabsChange(index) {
        
        console.log('我的索引为',this.current)
//当前索引为0
        if (this.current=='0') {
          this.TosetHeight();
        } else {
          this.setHeight();
        }
        //当前索引号选中当前tab栏的选项
        this.swiperCurrent = index;
      }

每次滑动都会触发这个函数

animationfinish(e) {
  //获取当前的索引
        let current = e.detail.current;
        //索引为几就选中几
        if (current=='0') {
          this.setHeight();
        } else {
          
          this.TosetHeight();
        }
        //获取并修改当前tab的索引
        this.$refs.uTabs.setFinishCurrent(current);
        //将当前的索引赋值给当前的轮播图
        this.swiperCurrent = current;
  
      },
相关文章
|
5月前
|
存储
uniApp监听左右滑动事件
uniApp监听左右滑动事件
110 0
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
|
3月前
|
Web App开发 小程序 Android开发
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
61 0
|
4月前
uniapp滑动事件
uniapp滑动事件
76 0
|
前端开发 JavaScript
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
ab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
29 0
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
31 0
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
40 3
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
36 3
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
24 2

热门文章

最新文章