微信小程序-tab组件

自定义组件-tab组件

tab-wxml内容

<!--components/items/items.wxml-->
<!-- 自定义组件 -->
<!-- tab选项 -->
<view class='title'>
  <view wx:for="{{titles}}" wx:key="index" class="{{index == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='{{index}}'>
    <text>{{item}}</text>
    <hr class="line-style" />
  </view>
</view>

<!--内容布局-->
<swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
  <swiper-item class='swiper' wx:for="{{content}}" wx:for-index="key" wx:for-item="value" wx:key="key">
    <view wx:for="{{value}}" wx:key="index" wx:for-item="item" class='record-item' >
      <view class='name'>
        <span>名称：{{item.name}}</span>
        <span>面额：{{item.money}}</span>
      </view>
    </view>
  </swiper-item>
</swiper>

tab-wxss内容

/* components/items/items.wxss */
.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-sel-selected {
  color: #006bff;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-sel .line-style {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.title-sel-selected .line-style {
  background: #006bff;
  height: 6rpx;
  width: 90rpx;
  position: relative;
  margin-top: 10rpx;
}

.swiper {
  width: 90%;
  height: calc(100vh - 88rpx);
  flex: 1;
  overflow: scroll;
  margin: 0 auto;
}

.record-item {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 5rpx;
  padding-top: 5rpx;
  font-size: 30rpx;
}

.name {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 2vh;
  border-radius: 10rpx
}

tab-js内容

// components/items/items.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    titles: {
      type: Array,
      value: []
    },
    content: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    titleClick: function (e) {
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
    },
    //swiper切换时会调用
    pagechange: function (e) {
      if ("touch" === e.detail.source) {
        let currentPageIndex = this.data.currentIndex;
        if (currentPageIndex < e.detail.current) {
          currentPageIndex = (currentPageIndex + 1) % 3
        } else {
          currentPageIndex = (currentPageIndex - 1) % 3
        }
        this.setData({
          currentIndex: currentPageIndex
        })
      }
    },
  }
})

tab-json内容

{
  "component": true,
}

tab组件使用

/* wxml */
<items titles='{{titles}}' content="{{con}}"></items>

/* .json
	"usingComponents": {
	    "items":"/components/items/items"
	  }
*/

/* titles数据例子--  titles: ['未使用','已使用'] */
/* 
con数据例子-- 
con:{
      "not_used": [{
        name: '未使用券1',
        money: '5.00'
      }, {
        name: '未使用券2',
        money: '50.00'
      }],
      "used": [{
        name: 'y券1',
        money: '10.00'
      }, {
        name: 'y券2',
        money: '20.00'
      }],
    }
*/