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高度 Number 100%
width 全局pageview宽度 Number 100%
renderTabBar 渲染何种tabBar: [tabs/segmented-control] String tabs
currentIndex 当前激活的索引 Number 0
defaultIndex 默认值 Number 0
tabsTransition tab是否开启过渡动画 Boolean true
tabsLine 是否开启bar线条 Boolean true
tabsLineSize 线条长度，范围[0-1] Number 0.5
tabsBorder 开启bar的border Boolean true
tabsBorderColor bar的border颜色 String #eeeeee
tabsBorderSize bar的border大小 String 2
tabsDuration bar的过渡动画时间 Number 0.2
tabsActiveColor 激活颜色 String rgb(69, 143, 246)
tabsTextStyles bar文本的额外的样式 String [style]
tabsFixed bar定位 Boolean false
tabsItemThreshold 当tab页面个数大于几个时开启左右滚动 Number 4
tabsDisabled 禁用bar Boolean false
tabsDefaultIndex bar的默认索引 Number 0
tabsStyles bar额外的样式 String [style]

Event 事件

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

Slot 插槽

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

Class 自定义类名

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