5-1 使用swiper配合上选项卡切换视图

最新推荐文章于 2025-06-24 17:28:47 发布

So灬低调

最新推荐文章于 2025-06-24 17:28:47 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序学习日志文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/u012717715/article/details/91373950

本文介绍了如何在微信小程序中利用Swiper组件配合选项卡实现页面视图的切换。通过WXML、JS和WXSS的代码示例，展示了如何设置样式和逻辑，确保选项卡和Swiper-item之间的联动，以及根据屏幕高度调整内容区域的高度。最终实现了一个功能完整的选项卡切换页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：在日常开发中会碰到这种上选项卡切换的页面，（一般为1～4个选项卡切换，或者像新闻类app可滑动的选项卡）在这里编写那种指定个数的页面开发

.wxml

<view class="swiper-tab">
    <block wx:for="{
  
  {titlelist}}">
      <view class="swiper-tab-list {
  
  {currentTab==index ? 'on' : ''}}" data-current="{
  
  {index}}" bindtap="swichNav">{
  
  {item}}</view>
    </block>
</view>

.js

const app = getApp()

Page({
  data: {
    // tab标题
    titlelist: ["日报", "精选"],
    // tab切换
    currentTab: 0,
  },

//选项卡事件
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})

.wxss