Scrollable Tab View 可滚动视图

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-scrollable-tab-view": "wuss-weapp/w-scrollable-tab-view/index",
  3.   "w-cell": "wuss-weapp/w-cell/index",
  4.   "w-cell-group": "wuss-weapp/w-cell-group/index",
  5. }

视频演示

代码演示 Demo1 配合w-tabs使用

  1. <w-scrollable-tab-view
  2.  bind:onChange="handleScrollableChange"
  3.  options="{{ options }}"
  4.  tabsLineSize="1"
  5.  tabsActiveColor="#ff9900"
  6. >
  7.     <scroll-view
  8.      scroll-y
  9.      wx:for="{{ options }}"
  10.      wx:key="{{ index }}"
  11.      slot="{{ item }}"
  12.      class="w-scrollable-tab-view-container"
  13.     >
  14.         <w-cell-group>
  15.             <w-cell
  16.              highlight
  17.              wx:for="{{ 20 }}"
  18.              wx:key="child"
  19.              wx:for-index="child"
  20.              wx:for-item="childItem"
  21.              label="列表 {{ child+1 }}"
  22.              content="你好，我是{{ item }}页面"
  23.             />
  24.         </w-cell-group>
  25.     </scroll-view>
  26. </w-scrollable-tab-view>
  1. data: {
  2.   options: ['关注','推荐','热榜','视频'],
  3. }
  1. page {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  5. .w-scrollable-tab-view-container {
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: auto;
  9. }

代码演示 Demo2 配合w-segmented-control使用

  1. <w-scrollable-tab-view
  2.  bind:onChange="handleScrollableChange"
  3.  render-tab-bar="segmented-control"
  4.  options="{{ options }}"
  5. >
  6.     <scroll-view
  7.      scroll-y
  8.      wx:for="{{ options }}"
  9.      wx:key="{{ index }}"
  10.      class="w-scrollable-tab-view-container"
  11.      slot="{{ item }}"
  12.     >
  13.         <w-cell-group>
  14.             <w-cell
  15.              highlight
  16.              wx:for="{{ 30 }}"
  17.              wx:key="child"
  18.              wx:for-index="child"
  19.              wx:for-item="childItem"
  20.              label="列表 {{ child+1 }}"
  21.              content="你好，我是{{ item }}页面"
  22.             />
  23.         </w-cell-group>
  24.     </scroll-view>
  25. </w-scrollable-tab-view>
  1. data: {
  2.   options: ['关注','推荐','热榜','视频'],
  3. },
  1. page {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  5. .w-scrollable-tab-view-container {
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: auto;
  9. }

API

Attribute 属性

属性说明类型默认值
options传入的选项组,支持array-keys模式 [a,b,c,d,e] or [{ name icon iconSize iconColor height width }]Array[]
height全局pageview高度Number100%
width全局pageview宽度Number100%
renderTabBar渲染何种tabBar: [tabs/segmented-control]Stringtabs
currentIndex当前激活的索引Number0
defaultIndex默认值Number0
tabsTransitiontab是否开启过渡动画Booleantrue
tabsLine是否开启bar线条Booleantrue
tabsLineSize线条长度，范围[0-1]Number0.5
tabsBorder开启bar的borderBooleantrue
tabsBorderColorbar的border颜色String#eeeeee
tabsBorderSizebar的border大小String2
tabsDurationbar的过渡动画时间Number0.2
tabsActiveColor激活颜色Stringrgb(69, 143, 246)
tabsTextStylesbar文本的额外的样式String[style]
tabsFixedbar定位Booleanfalse
tabsItemThreshold当tab页面个数大于几个时开启左右滚动Number4
tabsDisabled禁用barBooleanfalse
tabsDefaultIndexbar的默认索引Number0
tabsStylesbar额外的样式String[style]

Event 事件

事件名说明参数
onChange视图容器切换时触发的回调-
onAnimationFinish视图容器切换待动画完成时触发的回调-

Slot 插槽

名称说明
slot设置为options对应字段name的slot名字

Class 自定义类名

类名说明
wuss-class根节点样式类