小程序实现tab标签页：可点击切换，滑动切换页面

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

原创最新推荐文章于 2024-07-22 01:47:16 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端笔记专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简易页面Tab切换效果。通过简单的布局和样式设置，可以轻松地为用户提供友好的标签页浏览体验。文章包含了完整的代码示例。

页面效果：

HTML：


  <view wx:if="{{userType==0}}" style="height:100%">
    <view class="tab_box" style="width: 100%">
      <view class="tabs_v">
        <block wx:for="{{tabs}}" wx:for-item="item" wx:key="index">
          <view class="tab_v {{index<1?'tab_nature':'tab_course'}}" bindtap='changeCurrentTab_' data-index='{{index}}'
            data-current='{{index}}'>
            <text class="tab_txt {{currentTab==index? 'tab_v_active' : ''}}">{{item.label}}</text>
          </view>
        </block>
      </view>
    </view>
    <!-- tab 容器 -->
    <view class="tabWrap">
      <swiper class="" current="{{currentTab}}" duration="300" bindchange="swiperTab" style="width:100%;height:100%;">
        <!-- 页面1 -->
        <block>
          <swiper-item style="width:100%;height:100%;">
            <view class="" style="width:100%;height:100%;">
              <scroll-view style="width:100%;height:100%;" scroll-y="true" bindscrolltolower='scrollToLower'
                bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
                <view style="width:100%;height:auto;">
                  页面1
                </view>
              </scroll-view>
            </view>
          </swiper-item>
        </block>
        <!-- 页面2 -->
        <block>
          <swiper-item style="width:100%;height:100%;">
            <view class="" style="width:100%;height:100%;">
              <scroll-view style="width:100%;height:100%;" scroll-y="true" bindscrolltolower='scrollToLower'
                bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
                <view style="width:100%;height:auto;">
                  页面2
                </view>
              </scroll-view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

CSS：

/* tab */
.tab_box{
  height: 50px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 15px;
}
.tabs_v{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tab_v{
  width: 50%;
  text-align: center;
}
.tab_txt{
  border-bottom: 2px solid transparent;
  padding-bottom: 14px;
  color: #999999;
}
.tab_v_active{
  border-bottom: 2px solid #00C6AC;
  color: #00C6AC;
  font-weight: bold;
}
/* 容器 */
.tabWrap{
  width: 100%;
  height: calc(100% - 67px);
  position: relative;
  border-bottom: 1px solid #e6e6e6;
}

JS：


Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {label:'访客', index: 0},
      {label:'工作人员', index: 1}
    ],
    currentTab:0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  // tab切换
  changeCurrentTab_(e){
    let that = this
    if (that.data.currentTab === e.currentTarget.dataset.current){
      return false
    }else{
      that.setData({ 
        currentTab: e.currentTarget.dataset.current
      })
    }
  },
  //滑动切换
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  }
})