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;
  
      },
相关文章
|
4月前
|
JavaScript
uniapp写轮播图?
uniapp写轮播图?
|
10月前
|
存储
uniApp监听左右滑动事件
uniApp监听左右滑动事件
301 0
|
2月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
50 1
|
2月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
57 1
|
4月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
77 1
|
4月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
404 1
|
11月前
|
小程序 API
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
145 0
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
|
4月前
|
Web App开发 小程序 Android开发
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
141 0
|
4月前
uniapp滑动事件
uniapp滑动事件
356 0

热门文章

最新文章

下一篇
云函数