微信小程序学习：（六）tab切换及内容切换

最新推荐文章于 2024-04-13 11:35:17 发布

原创

最新推荐文章于 2024-04-13 11:35:17 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #tab切换

本文介绍微信小程序中如何实现tab切换与内容切换的同步，通过js动态计算，将swiper-item与tab序号绑定，满足切换交互需求。

微信小程序学习：（六）tab切换及内容切换

github地址： https://github.com/leoricding/-

(一)问题分析

需求：实现tab切换，内容切换；内容切换，tab也切换。

解决方案：js动态计算，实现swiper-item的序号以及tab的序号的绑定。

（二）直接上代码

很简单，没什么可说的。

// pages/lessionDetail/lessionDetail.js
const app = getApp();
Page({
   
   

  /**
   * 组件的初始数据
   */
  data: {
   
   
    listData:{
   
   },
    index:null,
    tabNavName:['详情',"目录","相关课程"],
    currentSelected:0,
  },

  //绑定事件，选中tab标签
  selectTab(event) {
   
   
    console.log("当前选中的tab标签"+event.currentTarget.dataset.index);
    let dataIndex = event.currentTarget.dataset.index;
    this.setData({
   
   
      currentSelected: dataIndex
    })
  },
  //swiper切换
  changeTab(event){
   
   
    console.log("swiper切换,显示当前swiper-item的index序号");
    console.log(event.detail.current);
    this.setData({
   
   
      currentSelected: event.detail.current
    })
  },
      
})

<!--pages/lessionDetail/lessionDetail.wxml-->
<!-- 引用模板 -->
<import src="/pages/template/teacher/teacher.wxml" />

<view class="container">
  <!-- 课程图片 -->
  <view class="lession-img-container"><image class="lession-img" src

最低0.47元/天解锁文章