如图，可以使用数组实现tab选项卡，一个区域容器显示内容，因此，初版的数据结构如下

// 选项卡 
selects = ['选项-1', '选项-2', '选项-3']  

// 内容容器  
content = {title: ''}  // 初始数据为空  

上述设计符合xquery的列表组件结构，在列表组件中，有列表项及列表footer两个部分

// xquery列表组件的基本配置结构  
const listConfig = {
    listClass: '',  // 列表容器样式  
    itemClass: '',  // 列表项样式
    data: [],  // 列表数据项  
    header: {},  // 列表项头部的独立内容容器
    footer: {}  // 列表项底部的独立内容容器
}

源码

小程序代码片段

使用xquery列表实现

wxml

<view class="container">
  <view class="tab-boxer">
    <ui-list list="{{tabConfig}}" />
  </view>
</view>

完整代码

/**
 * xquery是一套小程序的开发工具库
 * 说明: 在小程序中搜索 xquery，更多demo和说明
 * 源码: https://github.com/webkixi/aotoo-xquery
 * 小程序代码片段: https://developers.weixin.qq.com/s/KQahg0mV7TeW
 */
const Pager = require('../components/aotoo/core/index')
let lib = Pager.lib

function mkTab(id=lib.suid('step_'), options) {
  return {
    $$id: id,
    listClass: 'tab-header',
    itemClass: 'tab-item',
    data: (
      options || [
        {title: '选项-1', tap: 'onTap?id=1'},  // tap => bind:tap
        {title: '选项-2', aim: 'onTap?id=2'},  // aim => catch:tap
        {title: '选项-3', tap: 'onTap?id=3'},
      ]
    ),
    footer: {title: '', itemClass: 'tab-content'},
    methods: {
      __ready(){
        this.find({title: '选项-1'}).addClass('active')
        this.find('.tab-content').update({
          title: '我是选项一',
          img: {src: '/images/mk1.jpeg', itemStyle: 'width: 100px;', mode: 'aspectFit'}
        })
      },
      onTap(e, param, inst){
        if (inst) {
          inst.siblings().removeClass('active')
          inst.addClass('active')
        }
        switch(param.id) {
          case '1':
            this.footer.reset().update({
              title: '我是选项一',
              img: {src: '/images/mk1.jpeg', itemStyle: 'width: 100px;', mode: 'aspectFit'}
            })
            break;
          case '2':
            this.footer.reset().update({
              img: {src: '/images/mk2.jpeg', itemStyle: 'width: 100px;', mode: 'aspectFit'},
              title: '我是选项二，顺序变了'
            })
            break;
          case '3':
            this.footer.reset().update({
              title: '我是选项三',
              img: {src: '/images/mk3.jpeg', itemStyle: 'width: 100px;', mode: 'aspectFit'}
            })
            break;
        }
      }
    }
  }
}

Pager({
  data: {
    tabConfig: mkTab('tabselect'),
  },
})