小程序自定义组件可滑动切换选项卡tab-view

tab-view

可滑动切换选项卡

 基础库 1.6.0 开始支持，低版本需做兼容处理

属性	类型	默认值	说明	最低版本
tabs	Array	[]	必要属性，长度不少于2，建议不多于5，文本超出tab最大宽度则显示省略三小点
tab-center	Boolean	false	tab是否居中排列，空出左右两侧
show-cursor	Boolean	true	是否显示tab下方的线条游标，带有切换动画
cursor-deviate	Number	0	线条游标与tab文本的垂直偏离度，最小0，最大15
cursor-width-mode	String	normal	线条游标的宽度计算模式，normal（60rpx）、title（与当前选中的标题文本等宽）、tab（每个tab等比宽）
color	String	#888888	未选中时的tab文本和线条颜色
selected-color	String	#333333	选中时的tab文本和线条颜色
tab-background-color	String	#FFFFFF	tab的背景颜色
highlight	Boolean	true	选中的tab是否高亮显示，有字体加粗和字号变大的效果
duration	Number	250	线条游标的动画时长
component-style	String		组件整体样式，组件的宽、高、背景可通过该属性设置
bindpagechange	EventHandle		点击tab或左右滑动切换会触发pagechange事件，detail={"index":0,"id":"tabviewpage0","value":"文本"}
bindscrolltobottom	EventHandle		滚动到底部，会触发scrolltobottom事件 detail="direction":"bottom","index":0,"id":"tabviewpage0","value":"文本"

示例：

json 

{
  "usingComponents": {
    "tab-view": "../../components/tab-view/tab-view"
  }
}

wxml

<tab-view 
  id='mytabview' 
  tabs='{{tabs}}'
  bindpagechange="pageChangeEvent" 
  bindscrolltobottom='scrolltobottomEvent'>
  <view 
  wx:for='{{slotIds}}' 
  wx:key 
  wx:for-index='slotindex' 
  wx:for-item='slotitem' 
  slot='{{slotitem}}'>
    <view 
    class='order-item' 
    wx:for='{{[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}}' 
    wx:key 
    wx:for-item='orderitem'>
    {{"page: " + slotindex + " --- item: " + orderitem}}
    </view>
  </view>
</tab-view>

js

Page({

  data: {
    // tabs: [],
    // tabs: ['我已报名', '我的发布'],
    // tabs: ['吕布', '赤兔马', '方天画戟'],
    // tabs: ['昨天', '今天', '明天', '后天'],
    tabs: ['全部', '待付款', '待发货', '待收货', '待评价'],
    currentIndex: 0
  },

  onLoad: function (options) {
    this.mytabview = this.selectComponent('#mytabview')
    this.setData({
      slotIds: this.mytabview.getSlotIds()
    })
  },

  pageChangeEvent: function (e) {
    console.log(e)
  },

  scrolltobottomEvent: function (e) {
    console.log(e)
  }

})

效果：

组件传送门：https://download.csdn.net/download/honiler/10628059

注：粗略地写出来，有空再补充，有什么问题的话可评论留言。