小程序---页签滑动切换

最新推荐文章于 2024-07-22 01:47:16 发布

Ariel_ckr

最新推荐文章于 2024-07-22 01:47:16 发布

阅读量1.3k

点赞数 2

分类专栏：微信小程序开发文章标签： slider 微信小程序页签

本文链接：https://blog.csdn.net/Ariel_201311/article/details/83688066

版权

微信小程序开发专栏收录该内容

16 篇文章 5 订阅

订阅专栏

在这里插入图片描述

xxx.html

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <swiper-item>
    <view>你好</view>
  </swiper-item>
  <swiper-item>
    <view>今天天气很好</view>
  </swiper-item>
  <swiper-item>
    <view>出去玩吧</view>
  </swiper-item>
</swiper>

xxx.wxss

.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #777;
  text-align: center;
  line-height: 80rpx;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777;
}

.on {
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

xxx.js

var app = getApp()
Page({
  data: {
    // 页面配置  
    winWidth: 0,
    winHeight: 0,
    // tab切换 
    currentTab: 0,
  },
  onLoad: function() {
    var that = this;
    // 获取系统信息 
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  // 滑动切换tab 
  bindChange: function(e) {
    var that = this;
    that.setData({
      currentTab: 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
      })
    }
  }
})