zoukankan      html  css  js  c++  java
  • 微信小程序 tab切换组件封装

    参考地址:https://www.cnblogs.com/aomeng/p/13561668.html

    components/tabs/tabs.js
    // components/tabs/tabs.js
    // tabs切换封装
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        tabList: Object,
        tabIndex: {
          type:Number,
          value:0
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {},
    
      /**
       * 组件的方法列表
       */
      methods: {
        tabsChange(e) {
          const {
            index
          } = e.currentTarget.dataset;
          this.triggerEvent("tabsChange", {
            index
          })
        }
      }
    })

    components/tabs/tabs.wxml
    <!--components/tabs/tabs.wxml-->
    <view class="tabs">
      <view class="tabs_header">
        <scroll-view scroll-x="true" class="scroll-view">
          <view wx:for="{{tabList}}" wx:key="id" class="tabs_header_item  {{tabIndex == index?'active':''}}"
            bindtap="tabsChange" data-index="{{index}}">
            <text>{{item.value}}</text><text class="badge">{{item.number}}</text>
          </view>
        </scroll-view>
      </view>
      <view class="tabs_content">
        <slot></slot>
      </view>
    </view>

    components/tabs/tabs.wxss
    /* components/tabs/tabs.wxss */
    page,
    .tabs {
       100%;
    }
    
    .tabs_header {
      background: #FFFFFF;
      font-size: 28rpx;
      color: #7E8388;
      padding: 0 24rpx;
       100vw;
      height: 88rpx;
    }
    
    .scroll-view {
      white-space: nowrap;
      height: 100%;
       100%;
    }
    
    .tabs_header_item {
      box-sizing: border-box;
       164rpx;
      height: 88rpx;
      line-height: 88rpx;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
    
    .badge{
      margin-left: 10rpx;
    }
    
    .active {
      position: relative;
      color: #021224;
      font-weight: bold;
    }
    
    .active:after {
      content: '';
      position: absolute;
      left: 44rpx;
      bottom: 0;
       40rpx;
      height: 6rpx;
      background: #021224;
    border-radius: 2px;
    }

     

    使用:

    父组件json文件引入

    {
      "usingComponents": {
        "nodata": "../../../components/nodata/nodata",
        "tabs": "../../../components/tabs/tabs"
      }
    }

    父组件wxml文件使用

     <nodata imgName="{{'img_no_data.png'}}" hintText="{{'暂无数据'}}"></nodata>
  • 相关阅读:
    Luogu P4071 [SDOI2016]排列计数
    CF 961E Tufurama
    Luogu P2057 [SHOI2007]善意的投票
    Luogu P2756 飞行员配对方案问题
    POJ2151
    POJ 3349&&3274&&2151&&1840&&2002&&2503
    POJ 2388&&2299
    EZ 2018 03 30 NOIP2018 模拟赛(六)
    POJ 1459&&3436
    BZOJ 1001: [BeiJing2006]狼抓兔子
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/14448283.html
Copyright © 2011-2022 走看看