超简单实现 微信小程序 选项卡

Posted 2020-10-22 CoKeny

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超简单实现 微信小程序 选项卡相关的知识，希望对你有一定的参考价值。

<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==index ? ‘on‘ : ‘‘}}"  wx:for="{{navbar}}" data-current="{{index}}"  wx:key="unique" bindtap="swichNav">{{item}}</view>
</view>


<view hidden="{{currentTab!==0}}"> 
1
</view>

<view hidden="{{currentTab!==1}}"> 
2
</view>

<view hidden="{{currentTab!==2}}"> 
3
</view>

<view hidden="{{currentTab!==3}}">
4 
</view>

.swiper-tab {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  margin-top: 10rpx;
  background: #fff;
}
swiper-item{
  display: inline;
}
.swiper-tab-item {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #666;
}

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

// pages/search/search.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navbar: [‘全部‘, ‘待付款‘, ‘进行中‘, ‘已完成‘,‘售后‘],  
    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
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
})

 

以上是关于超简单实现 微信小程序 选项卡的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序之选项卡的实现方法

微信小程序：选项卡页面切换

微信小程序基于OCR插件实现图文识别（超简单）

微信小程序swiper选项卡每个内容都小于一屏，怎么让内容高度自适应?

微信小程序实现上下左右滑动触发联动选项卡绝对值事件parsestringifyMathatanabsfindIndex

微信小程序实现角度或左右滑动触发联动选项卡绝对值事件parsestringifyMathatanabsfindIndex