微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下

分析

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。

2、swiper组件的current组件用于控制当前显示哪一页

3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

wxml:

 
  
   
    
     {{navItem.text}}
    
   
  
 

------------------------------------------------

 
  
    
     
      

 
  
 


 
  {{tabItem.title}}
  
   {{tabItem.text}}
   {{tabItem.text}}
  
 
 
  ￥{{tanItem.cost}}
 

      
     
    
  
 

JS

Page ({
 const app = getApp()
 data: {
  recordMian: [
   {
    title: "插画艺术"
   },
   {
    title: "工艺作品"
   },
   {
    title: "服装艺术"
   },
   {
    title: "三维建模"
   },
  ],
  tabContent: [
   {
    title: "台灯卧室床头 简约现代书房 北欧宜家创意装饰个性圆球台灯床头灯",
    text: "台灯",
    cost: "1255",
    imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
   },
   {
    title: "雪域冰雪天地8寸牛乳芝士蛋糕",
    text: "蛋糕",
    cost: "15",
    imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
   },
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 // 事件处理函数
 onLoad: function() {
  // 控制record-box随鼠标切换调整位置
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
   } else if (this.data.canIUse) {
    app.userInfoReadyCallback = res => {
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   }
  else {
   wx.getUserInfo({
    success: res => {
     app.globalData.userInfo = res.userInfo
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   })
  }
  wx.getSystemInfo({
   success: (res) => {
    this.setData({
     pixelRatio: res.pixelRatio,
     windowHeight: res.windowHeight,
     windowWidth: res.windowWidth
    })
   }
  })
 },
 // 滑动事件
 // 点击标题切换当前页时改变样式
 switchNav(event) {
  var cur = event.currentTarget.dataset.current;
  if (this.data.currentTab == cur) {
   return false;
  } else {
   this.setData({
    currentTab: cur
   })
  }
 },
 // 滚动切换标签样式 
 switchTab(event) {
  var cur = evnet.detail.current;
  var singeNavWidth = this.data.windowWidth / 5;
  this.setData({
   currentTab: cur,
   navScrollLeft: (cur - 2) * singleNavWidth
  });
 }
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。