index.axml 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <view class='page-container-classname' ref='saveChildRef0'>
  2. <demo-block title='基础用法' ref='saveChildRef1'>
  3. <van-tabs active='{{ 1 }}' onChange='onChange' ref='saveChildRef2'>
  4. <van-tab a:for='{{ tabs4 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs4 }}' ref='saveChildRef3'>
  5. <view class='content'>
  6. {{ '内容' + item }}
  7. </view>
  8. </van-tab>
  9. </van-tabs>
  10. </demo-block>
  11. <demo-block title='通过名称匹配' ref='saveChildRef4'>
  12. <van-tabs active='b' ref='saveChildRef5'>
  13. <van-tab a:for='{{ tabsWithName }}' a:key='{{*this}}' name='{{ item.name }}' title="{{ '标签 ' + item.index }}" ref-numbers='{{ tabsWithName }}' ref='saveChildRef6'>
  14. <view class='content'>
  15. {{ '内容' + item.index}}
  16. </view>
  17. </van-tab>
  18. </van-tabs>
  19. </demo-block>
  20. <demo-block title='横向滚动' ref='saveChildRef7'>
  21. <van-tabs ref='saveChildRef8'>
  22. <van-tab a:for='{{ tabs6 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs6 }}' ref='saveChildRef9'>
  23. <view class='content'>
  24. {{ '内容' + item }}
  25. </view>
  26. </van-tab>
  27. </van-tabs>
  28. </demo-block>
  29. <demo-block title='禁用标签' ref='saveChildRef10'>
  30. <van-tabs onDisabled='onClickDisabled' ref='saveChildRef11'>
  31. <van-tab a:for='{{ tabs3 }}' a:key='{{*this}}' disabled='{{ index === 1 }}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs3 }}' ref='saveChildRef12'>
  32. <view class='content'>
  33. {{ '内容' + item }}
  34. </view>
  35. </van-tab>
  36. </van-tabs>
  37. </demo-block>
  38. <demo-block title='样式风格' ref='saveChildRef13'>
  39. <van-tabs type='card' tab-class='special-tab' ref='saveChildRef14'>
  40. <van-tab a:for='{{ tabs3 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs3 }}' ref='saveChildRef15'>
  41. <view class='content-2'>
  42. {{ '内容' + item }}
  43. </view>
  44. </van-tab>
  45. </van-tabs>
  46. </demo-block>
  47. <demo-block title='点击事件' ref='saveChildRef16'>
  48. <van-tabs onClick='onClick' ref='saveChildRef17'>
  49. <van-tab a:for='{{ tabs2 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs2 }}' ref='saveChildRef18'>
  50. <view class='content'>
  51. {{ '内容' + item }}
  52. </view>
  53. </van-tab>
  54. </van-tabs>
  55. </demo-block>
  56. <demo-block title='粘性布局' ref='saveChildRef19'>
  57. <van-tabs sticky=" " ref='saveChildRef20'>
  58. <van-tab a:for='{{ tabs4 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs4 }}' ref='saveChildRef21'>
  59. <view class='content'>
  60. {{ '内容' + item }}
  61. </view>
  62. </van-tab>
  63. </van-tabs>
  64. </demo-block>
  65. <demo-block title='切换动画' ref='saveChildRef22'>
  66. <van-tabs animated=" " ref='saveChildRef23'>
  67. <van-tab a:for='{{ tabs4 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs4 }}' ref='saveChildRef24'>
  68. <view class='content'>
  69. {{ '内容' + item }}
  70. </view>
  71. </van-tab>
  72. </van-tabs>
  73. </demo-block>
  74. <demo-block title='滑动切换' ref='saveChildRef25'>
  75. <van-tabs swipeable=" " ref='saveChildRef26'>
  76. <van-tab a:for='{{ tabs4 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" ref-numbers='{{ tabs4 }}' ref='saveChildRef27'>
  77. <view class='content'>
  78. {{ '内容' + item }}
  79. </view>
  80. </van-tab>
  81. </van-tabs>
  82. </demo-block>
  83. <demo-block title='自定义标题' ref='saveChildRef28'>
  84. <van-tabs active='{{ 1 }}' tab-class='special-tab' tab-active-class='special-tab-active' onChange='onChange' ref='saveChildRef29'>
  85. <van-icon slot='nav-right' name='search' custom-class='right-nav' onClick='onClickNavRight' ref='saveChildRef30'>
  86. </van-icon>
  87. <van-tab a:for='{{ tabs4 }}' a:key='{{*this}}' title="{{ '标签 ' + item }}" dot='{{ index === 1 }}' info='{{ index === 2 ? 99 : null }}' ref-numbers='{{ tabs4 }}' ref='saveChildRef31'>
  88. <view class='content'>
  89. {{ '内容' + item }}
  90. </view>
  91. </van-tab>
  92. </van-tabs>
  93. </demo-block>
  94. </view>