更新记录

1.1.3（2021-07-18） 下载此版本

修改了demo示例

1.1.2（2021-07-17） 下载此版本

去掉swiperChange事件的console.log输出

1.1.1（2021-07-17） 下载此版本

去掉swiperChange事件的console.log输出

平台兼容性

tbs-pages 多页面切换组件

组件名：tbs-pages

说明

tbs-pages组件包含可以切换的多个页面，可配合tabBar或顶部scrollTab使用，实现在页面切换时，页面的内容及状态可以保持，每次切换到页面时，页面数据不会被重新加载。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

API

tbs-pages Props

属性说明：

pages属性的数据结构需要有一定的格式要求，示例：

// 下面为pages属性的demo演示数据
pages: {
    current: 0, // 当前显示的页面的序号index
    list: [ // 页面数组
        {
            pageTmpl: 'testPage1', // 页面模板名称，必须
            pageData: { // 页面数据，必须
                text: '测试页面-1' // 此处的内容根据业务需要定义
            }
        }, 
        {
            pageTmpl: 'testPage2',
            pageData: {
                text: '测试页面-2'
            }
        }, 
        {
            pageTmpl: 'testPage3',
            pageData: {
                text: '测试页面-3'
            }
        }, 
        {
            pageTmpl: 'testPage4',
            pageData: {
                text: '测试页面-4'
            }
        }, 
        {
            pageTmpl: 'testPage5',
            pageData: {
                text: '测试页面-5'
            }
        }
    ]
}

tbs-pages Events

无

基本用法

在调用组件的页面里编写如下代码： 在 template 中使用组件

<tbs-pages :pages="pages" :current="current" height="300px;" />

在 script 的 data 中加入pages变量，表示当前页面传给组件的自定义pages数据

data() {
    return {
        current: 0,
        pages: {
            current: 0,
            list: [{
                pageTmpl: 'testPage1',
                pageData: {
                    text: '测试页面-1'
                }
            }, {
                pageTmpl: 'testPage2',
                pageData: {
                    text: '测试页面-2'
                }
            }, {
                pageTmpl: 'testPage3',
                pageData: {
                    text: '测试页面-3'
                }
            }, {
                pageTmpl: 'testPage4',
                pageData: {
                    text: '测试页面-4'
                }
            }, {
                pageTmpl: 'testPage5',
                pageData: {
                    text: '测试页面-5'
                }
            }]
        },
    }
},

关于为什么要使用 templates 组件来加载页面

tbs-pages组件里的页面，是可以根据pages数组来指定页面模板和页面数据的，但uniapp不支持动态组件。 比如在微信开放工具里可以采用 的模式动态加载组件，但uniapp一直 不支持，所以，只有采用在“components”目录下创建“templates”组件，同时根据页面模板类型的不同，创建 多个页面模板，此处演示为：testPage1~testPage5，根据pages数据list下面的pageTmpl的类型来动态加载 页面组件和页面数据。 由于templates模板的内容是根据业务模板的创建而需要经常更新的，所以不适合建立为uni_modules组件，同时 为了便于引用，所以采用常规的component组件，同样符合easycom规范，不用import即可直接使用。

下面简介一下 templates 组件代码

在 template 中编写代码如下：

<template>
    <view>
        <testPage1 v-if="page.pageTmpl==='testPage1'" :pageData="page.pageData" />
        <testPage2 v-if="page.pageTmpl==='testPage2'" :pageData="page.pageData" />
        <testPage3 v-if="page.pageTmpl==='testPage3'" :pageData="page.pageData" />
        <testPage4 v-if="page.pageTmpl==='testPage4'" :pageData="page.pageData" />
        <testPage5 v-if="page.pageTmpl==='testPage5'" :pageData="page.pageData" />
    </view>
</template>

其中：testPage1~testPage2为实际的页面组件模板

在 script 中定义属性：page

props:{
    page:Object
},

page属性对象包含两个属性： pageTmpl -- 页面模板类型 pageData -- 页面数据对象

具体测试代码请参考组件里的示例项目代码。