zoukankan      html  css  js  c++  java
  • 小程序之——scroll-view实现左右滚动tab

    wxml:

    <scroll-view class="pick_tab_box" scroll-x>
        <view id='tabOne' class='{{currentTab === 0 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>全部</view>
        <view id='tabTwo' class='{{currentTab === 1 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>tab1</view>
        <view id='tabThree' class='{{currentTab === 2 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>tab2</view>
        <view id='tabFour' class='{{currentTab === 3 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>tab3</view>
        <view id='tabFive' class='{{currentTab === 4 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>tab4</view>
        <view id='tabSix' class='{{currentTab === 5 ? "tab_active" : ""}} tabItem' bindtap='switchTab'>tab5</view>
    </scroll-view>

    wxss:

    .pick_tab_box {
      display: flex;
      align-items: center;
      white-space: nowrap;
       100%;
      background: white;
      margin:50rpx 0;
    }
    
    ::-webkit-scrollbar {
       0;
      height: 0;
      color: transparent;
    }
    
    .tabItem {
      box-sizing: border-box;
      padding: 20rpx 50rpx;
      display: inline-flex;
      justify-content: center;
      font-size: 30rpx;
    }
    
    .tab_active {
      color: #fa425f;
      border-bottom: 5rpx solid #fa425f;
    }
    

    tips1:如果最外面标签scroll-view上没有 white-space: nowrap;

    就变成

     没有左右滑动!

    tips2:下图标红的部分,用来消除滚动条

     

    tips3:如果每一项tab上没有 display: inline-flex;

     就会是这样的:

    js:

    data: {
        currentTab: 0, //按了哪个tab键
        status: 1//状态,接口需要的参数
      },
    //点击tab
      switchTab: function(e) {
        var nowTabId = e.target.id;//标签的id
        switch (nowTabId) {
          case "tabOne":
            this.setData({
              currentTab: 0,
              status: ""
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabTwo":
            this.setData({
              currentTab: 1,
              status: 1
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabThree":
            this.setData({
              currentTab: 2,
              status: 2
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabFour":
            this.setData({
              currentTab: 3,
              status: 3
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabFive":
            this.setData({
              currentTab: 4,
              status: 4
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabSix":
            this.setData({
              currentTab: 5,
              status: 5
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabSeven":
            this.setData({
              currentTab: 6,
              status: 6
            });
            //获取数据的方法可以写在这儿
            break;
          case "tabEight":
            this.setData({
              currentTab:7,
              status: 7
            });
            //获取数据的方法可以写在这儿
            break;
        }
      }            

    最终效果:

  • 相关阅读:
    BZOJ1406: [AHOI2007]密码箱 数论
    BZOJ5188: [Usaco2018 Jan]MooTube 并查集+离线处理
    BZOJ2662: [BeiJing wc2012]冻结 spfa+分层图
    BZOJ1297: [SCOI2009]迷路 矩阵快速幂
    BZOJ4887: [Tjoi2017]可乐 矩阵快速幂
    BZOJ5168: [HAOI2014]贴海报 线段树
    开发富文本编辑器的一些经验教训
    数据可视化的发展前景、商业/职业前景?
    市场调研中如何做数据分析?
    当前火热的短视频,背后有着哪些黑科技技术?
  • 原文地址:https://www.cnblogs.com/zhaoyingzhen/p/11642920.html
Copyright © 2011-2022 走看看