微信小程序解决swiper组件高度问题(可实现不同tab栏,swiper组件不同高度)

简介: 微信小程序解决swiper组件高度问题(可实现不同tab栏,swiper组件不同高度)

前言


我们经常会使用微信小程序自带的tab组件与swiper组件搭配来实现漂亮的tab切换页面,但是我们不得不承认swiper组件默认高度的确是很让我们头疼。那么下面我们来实现上图中根据不同的tab页面来使swiper页面动态的变换高度。


干货


wxml


<!--index.wxml-->
<view class="container">
    <view class="tab-body" hover-class="none" hover-stop-propagation="false">
    <view class="tab"> 
          <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">Tab1</text>
          <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">Tab2 </text>
          <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">Tab3 </text>
    </view>
    </view>
  <swiper current="{{currentTab}}"  bindchange="bindChange"  class='swp'  style="height:{{swiperViewHeight}}px">
  <swiper-item>
        <view class="v1">
        <view class="box"></view>
        <view class="box2"></view>
        </view>
      </swiper-item>
  <swiper-item>
        <view class="v2">
        <view class="box"></view>
        <view class="box1"></view>
        <view class="box2"></view>
        </view>
    </swiper-item>
  <swiper-item>
        <view class="v3">
        <view class="box"></view>
        <view class="box2"></view>
        <view class="box1"></view>
        <view class="box2"></view>
        <view class="box"></view>
        <view class="box1"></view>
        </view>
    </swiper-item>
   </swiper>
</view>


wxss


.swp{
  width: 100%;
  height: 100%;
  padding-top: 80rpx;
}
page{
  height: 100%;
  background:#f4f4f4;
}
.select{
  color: blue;
}
.tab-body{
  position: fixed;
  top:0;
  width: 100%;
  z-index: 100;
  background: #dddddd;
}
.tab{
  display:flex;
  justify-content:space-around;
}
.box{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:green;
}
.box1{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:red;
}
.box2{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:orange;
}


index.js


Page({
  data:{
    currentTab: 0,
    swiperViewHeight: '',
    arr:['.v1','.v2','.v3']
  },
  // 滑动切换
  bindChange: function (e) {
      var that = this;
      that.setData({
        currentTab: e.detail.current
      });
      this.setSwiperHeight(this.data.arr[e.detail.current])
    },
  //点击tab切换
    swichNav: function (e) {
      var that = this;
      if (this.data.currentTab === e.target.dataset.current) {
        return false;
      } else {
        that.setData({
          currentTab: e.target.dataset.current
        })
      }
    },
  // 赋值高度
  setSwiperHeight: function (v) {
  let query = wx.createSelectorQuery().in(this);
  query.select(v).boundingClientRect();
  query.exec((res) => {
    let headerHeight = res[0].height;
    this.setData({
      swiperViewHeight: headerHeight
    });
  });
},
  // swiper 自适应高度
  onLoad: function (options) {
      this.setSwiperHeight(this.data.arr[0])
    },
})


讲解


其实这里核心解决方法就是动态获取每个tab页面的高度,使用了微信小程序自带的api来获取容器的高度。通过触发tab栏来获取对应的页面高度,达到不同tab栏不同容器高度效果。



相关文章
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
127 1
微信小程序:轻松实现时间轴组件
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
837 1
|
4月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
130 0
微信小程序:自定义关注公众号组件样式
|
22天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
25天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
25 0
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
554 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
93 0
微信小程序更新提醒uniapp
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
155 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章