更新记录

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输出

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

tbs-pages 多页面切换组件

组件名:tbs-pages

说明

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

安装方式

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

API

tbs-pages Props

属性名 类型 默认值 说明
pages Object 传递给组件的页面数组对象数据
current Number 0 当前展示的页面的序号index
height String '100vh' 组件的高度

属性说明:

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;" />

scriptdata 中加入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 -- 页面数据对象

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问