更新记录

1.1.1(2021-07-18)

测试一下修改插件的名称,tbs-tabbar-frame改为tbs-tabBar-frame。

1.1.0(2021-07-18)

完善了readme.md文件

查看更多

平台兼容性

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

请注意:由于该组件引用了components中的组件,而此类components代码并未包含在本组件中,所以,请注意查看readme和示例代码

tbs-tabBar-frame 带自定义tabBar、并且可以“动态”加载页面模板的框架

组件名:tbs-tabBar-frame

说明

此框架是为了简化带tabBar组件的页面开发,同时,当tabBar切换时,此框架里的页面模板会对应更换,且已经加载过的内容不会重复刷新数据。

依赖的组件

1、tbs-tabBarInPage 在页面中生成tabBar的组件,该tabBar完全自定义,不受小程序2~5个tab的限制。

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

安装方式

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

API

tbs-tabBar-frame Props

属性名 类型 默认值 说明
pages Object 传递给组件的页面数组对象数据
tabBar Object 传递给组件的tabBar数据

属性说明:

pages数据结构需要有一定的格式要求

该格式和tbs-pages组件一致,请参阅tbs-pages组件里的readme文件和demo

tabBar数据结构需要有移动的格式要求

该格式和tbs-tabBarInPage组件一致,请参阅tbs-tabBarInPage组件里的readme文件和demo

tbs-tabBar-frame Events

事件称名 说明 返回参数

属性说明: 无

基本用法

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

<template>
    <view>
        <tbs-tabBar-frame :tabBar="tabBar" :pages="pages"/>
    </view>
</template>

scriptdata 中加入: tabBar变量、pages变量,由于考虑到pages组件要和tabBar组件的切换操作同步,所以pages组件的页数和tabBar的tab数相等。 tabBar变量,表示当前页面传给组件的自定义tabBar数据

data(){
    return{
        selected: 0,
        tabBar: { //此处为tabBar属性的demo演示数据,当然你可以根据需要进行修改
            selected: 0, // 当前选择的tab的index序号
            color: "#7A7E83", // 非选择项的字体颜色
            selectedColor: "#3cc51f", // 选择项的字体颜色
            list: [{ // tabBar 里的item项目列表
                // 此处图标icon的路径可以有两种表示方式,一种是图片路径格式,另一种是采用base64格式
                // 图片路径格式必须要保证路径下的文件是存在的,演示如下:
                // selectIconPath: "/static/images/tabbar/home-a.png",
                // iconPath: "/static/images/tabbar/home.png",
                // 下面是demo数据,为了便于使用测试,使用base64格式加载icon
                selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADIUlEQVRoQ+2ZO2gTcRzHP7+r+Nh8DA4macVFVFRU3IRuLlYXnaSL+ChtbS7BQRSxQqFDtblWW/G16CK6iDrpIIh2URcfoHTyLkUcShfBpbmfJK01bdPcI7mYQm4L93t8P7/f//6vCMv8kWWunwZAqQ4mLD2EcBplP0IOeIfLgJ2St9XueHU70KtGYh0WytmSQpWUnRKrmhBVA2i5qlvdFeTFHSwrULjt5jCzafldDZCqAMQtPSwwBLT4FPVGXVJOWt77tF/SrGKA5oyeU2EghJBJhJSdlAchfOdcQgPEBnWNYRSqfqoSAQj9dlIuhI0RCmDTNd3VZHAd4UDYxMV+Ak9yLt3ZtEwEjRcYIGHpMeAmsCFoMg/7b2rQ4/TIiyBxAwHEM3pRhL4gCYLaKqQdUzJ+/XwBtGR0rWtwA+W438CV2Cncc5KcQkS94ngCxAZ1v2FwC9jtFazK78dcl45sWj6Vi1sWIDGk7Sh3gZVVFuc33JQKnU5SHi7lsCRAwtJ+4LzfTFHaKfQ5plwqlWMRwGZLN+aUOwhtUYoKGjs/1U6v4OREt0wumIL//WzJaKsrhSGzJWiCGtmPK5x0THn9N99cB+KWdgqM1EhIRWkUuhxTRvNBCgCxjLYawquKotbeuc025XkBIJHRdoT7sxoeA/nVtv4e4Rk6+20KZ+yk3C4eQiMifAXWo/TWn/rCeJnRpUzZpgzPDaFisYkhvVzPAHZSriw5CxWGUwMgwsEn9DY6EGF9vUM3OuBdo78WvxReipIVYVohVthbKav9hyhhWaMOjIly9HtKfsybnod1Gy6PgO2hIWoA8MU2ZUc5gQlL83dBe0NBRA2gMOqY0lVOXHxI74lyoi4B8kv9wnl6odCKFsqoO9AA8BpXjQ6EqFDjG5i/d454M1cXs9DM5W1+xQz+RA1Q4i+qRfdCm4Y11uTiBFdfdOTzcg55ZFU44pjytOyJrHAqq6NbuSKxH2xT9i2sjdfVYgpY5VXQGrz/qUqHk5InvgHyhs0Z3ePCTjForoHIkikExnPK56wpH0sZeF6v/y/hfvM2APxWKiq7Zd+BP2J+ZUCnohS9AAAAAElFTkSuQmCC",
                iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAERElEQVRoQ+2ZTYhbVRTH/+cmDriRUheCCgoiOLpwBCm6ENwUF1rLMMm9L4QsNG1n7Fhm1Cp+gRGUilq02kH7IZR2SO694xBR6UZQV4robFqRYEVFF+LGCDLqzCTvyBuScJuPSV7mOWQgdxXeO/ec/++ce99974SwzQdtc/0YArSr4MLCwgO+7x8AsAtAFcCSEOJkMpn8OOqKR1qBXC4nRkdH3wRwqJ1QZj5eKpVmcrmcHxVIZAD5fP6WWCwWiL+vi7hPiGhWSvldFBCRABQKhQeFEMcA3OiIOkVEAdAqMz8FYL9z75caRHGzEJsGMMYcBvBak5DDSqmj7jWt9ZNE9Kp7jYiekVK+shmIvgGstVcyc5D1RmaJ6Eff92c8z2u7WbXWewEcI6Ib6qKJ6Ey5XJ6enJz8ux+QvgC01rcDeJuI7nGCnq9UKrPpdPrSRkJqe+UtALsduy8rlcqhdDq9FBYiNIDWOklE7wC42gn2hlLq8TDBjTHHAUw7c/4AMKOUmg/jJxSA1vo5InrJDcDMU57nnQgTtG6rtZ6pbfTGdCJ6WUr5fK/+egIoFos7VldXg4ylnbVbqlarj6RSqc97DdbOzlq72/f9OSK62fH9/tra2oF0Ol3u5rsrgLV2FzMHGR5zAhRXVlamM5nMb90C9HLfWnsdgBPMfL9jf1EIMZVMJr/YyMeGANbaDDOfBjDiODmilHq2F2FhbYwxrwN4wpm3SkQHpZTvdfLVEcBae4SZn65PZOY1IURWSnkurLAw9saYhwG8C+AKZ95RpVRw3rSMFoB8Pn9NLBY7BWCPI/5CPB7PJhKJb8KI6ddWa30XgNNEdJvj43w8Ht83MTFx2bK9DKBQKNwrhAiWzE2OeLO8vLw/m83+1a+gfubNz89fFY/HA4ikM/8nItonpfy0sR/rP7TWB4lorilYTin1Yj8CoppjjHkBQK7J36NKqXWt6xWoZf6zNkEHFQBCiD3B90UdICOEOLtORLTAzPWyDSwAEU1KKU829oAxZo6ZS0S00ynZoAHUl1JZKRW8T7V+EzetuYEDaN6TLY/RIUBUj5+an24JHVYg4oS3uBtWoN+T2Fp7K4C7fd//F8DXnud930+1trwCTleu8TJYE/5RP925LQWw1u5k5osAru2Q7Z9HRkbuGB8f/7PXamwpgNbaI6JC402R6Jzv+/8QUdAnXR++7z+USqXODCRAp2x1y+JGMN3mRnoODAHalGJYgTDnwHAJDZcQgFrz1tY+L7+SUgYtjp7G/7GErLVnmTkTCGDmxzzPC/40aYyWx+ji4uL1lUrlV8fmBwBhOsb1z77mTkKn692S0/BDRHullB9uCBDcNMYEbe+gmTtIY0kpdWezoI6tRa31LBEFPZkdA0DxO4AppdQHPQMEhtbasWq1OiaEaPwltNUwRHRJCPFtIpG40C521/b6VgsOG28IEDZjUdtv+wr8B8kwYU+OeseKAAAAAElFTkSuQmCC",
                text: "首页"
            }, {
                selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACmUlEQVRoQ+2YP2hTURSHv18yCQ5FtIK2zxZnF3EUsZPUinSpIEVqUcHF5mZwE2wHJ6V9HRwUxU5FdHCoWnCq1FV0qEK3vBdpBRHcBJEciVJJY5q+JC+SCw28JZxz+b537r93hOc/ec7PjkC9CvaHtr9kXDBxG7GGsQ4sZ4ypQl7f0qh+WysQhLYMHK8B+h64Fju9aVWibQJBaFeA+3UAv8sYifJ60YpEWwT23bXdu36ygnGoHpzBfNFptOMEekM7IXidBCxj9BfyKiSJrRXTlgoEs5bDCJNAmTFezGsuSez/FJjDGEsEJSbjnKYSxdYISr8CTywbrLEKHE4E1WkCvTM2LPEsEXw5qOMEQnsguOSlQN+MdZVgFdHtpUAwazcxJhPDl2eQuB7ldKeRnMrY1BZxENoZYKFREMtwqjihV43mbcSnItA7YxclHjUDETu1xNBSchkcMSY42Qw88DV22ttk7u+0TQJ/53DV1tbM3G4FqkbuW8RCrQNvs0BotpFcWdqg4v+UwRod7mnsdG7LRVwJ2qEC5V1rNMppvuYi9kHAYLHodNpbgTJ45ezwbQ2U+QuxU7+3FTBYKjoNeCsAzMVO4/4KVJ1R3q2B6k9Q7wRKxsCnvJa8nULVXQzvKlB9e/VNYNMZ8O9ttMMvc9VngHcCEreinG54exuVGIpyeumtwI8M3Z8n9MVXgZXY6Uj1F5BPu9C92OmqtwKCy5HTQ38FMhyNJvTOV4H12OlArQ6AH20VYyHO6+y2Ao32OILQRoCNp9H05PF1WvAtdeY2CHqm7WA2y3DJGBIMJifbPlLwOHI6v1VkKgKVg/dM256sGDRxTNBn0Mefp2t7XDAoH1QfgI+Cxdjpeb281AWSQKYZsyOQ5ttsZqxfr75fQF7akegAAAAASUVORK5CYII=",
                iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEPUlEQVRoQ+2ZXWhcRRTH/+dukieFIlJBBBuq+KC24kNBFLEI1i/EJeScexNjLVX0weqTiqjYPlgUffADpRbFILI7ZwLGULFWfYhEBAWxYC0KRdcXi4RC9cUQkjsycTbcbHez3eyG3AsdWFju3Z35/+acM2fmDKHgjQquHxcAVrNgpVK5rFQqjQF4FcCfAE4DmBkYGDhQLpfP9sL662oBVZ0BcEsToceJaB8zf9MtxLoBqOojAA6vIvDfKIp4eHj4024g1gXAWnsRgBPOuSuDuHeI6IU0TR8kohcBbArPj4jIfbkDUNVbAXwdhM329fVtHxoa8v6/1FT1DIBL/HciupaZT64VYr0s8KRz7nUvyjl3OI7jR7MCrbXWOTccAB5m5vdzBaCq4wB2B1FjIvJRVqCqejfaH57tF5EDuQGw1pacc78C2OpFLSwsbBkdHf0jK9AYs4+I3swlgKreD2AyuM9MHMc+HlY0Y8woEdWtki8LGGPeI6K9QfFBEXmuCcBdRPRZ7iwwOTm5aX5+3rvP5iDuThE51ghgrR1zzn2YO4CG4DwlIlc3C05VPQSgvjI9JSKvbXgQT0xM3Jum6ZGMkLdE5IkWAD8BuC7Eya44jr/YUIBqtfpQFEUfZETUiOgGZv67UZiq3gxgeQ8kIl3loq7+7IWXSqXdzrnbskKJaBsz+1k+p6nqKwCe9i+I6AwzX7rW2V/qI/vnjA+vWNoafLvleEQ0XSqVRrLbhiYW+AXANR2K/gGA3zedk/AaAVy946xpVXX5eYuBawDGzyejqurvALZ0CLD0cyKaYGZeYe0GC3QK8L1z7u04jutLYltdIV78VmKtEKPMXKkP1LEFug26toTN42Z570RER5n57kIBeLFZN85OYiEsYK0ddM79Fma9JiKDhbJAtVq9PYqir0IgTzPzzkIBZM/XRDTOzHuKBnAQwLNB9IocVYgYMMYYIhIPkKbpniRJ/Inv/9zQaR7YoGX0OwA7AsDOJEmmiwYwC2Bpz5Sm6WCSJD7zF8MCU1NTF8/Nzf1TF9zoAbl3IWPMdiI63iwHFCIGjDExEVWb5YBCAKjqywCeCQAvMfPz2YUn9y6kqp8D2BVE3yMi9WpGMYJYVf+qVzmIaDMz+xVpueXaAsaYrUR0Kqg9ISLXZ8XnPgastWXn3MdB9Lsi8lihALJncSJqWsXu2IUaZwDAocXFxTdGRkb8Yb2nTVX97JdDBr4xSZIfu7bAKgp9te2YiHzSKwpV9f7v4+A0M1/erN+ellXCAGeJ6Ms0Tb8lIl/gqvX399fO91bSWutvbq5K03SMiB4Pfba8iuqqsGWt3euc85Xom3o16y36aVmC7wqgPpiq+iPeAwDuAHBFj2GMiCSt+uwJQLbzSqWyLYqiHf7yLtR+fP3Hf+o3k+34ZonoZ+fcySiKjra7hu05QDt1vX5/AaDXM9ppf/8BjdUzT5WdwHQAAAAASUVORK5CYII=",
                text: "分类"
            }, {
                selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACp0lEQVRoQ+2ZvWsUURDAf3Mn2okW2mj2sFFMQLS0sFAEbYQIWgrxCwQhu4d/gPEfMJvYiKgJljZRbEwhWgiWKn6BgnjvThAsFDvB25G95MJG924/E+8FF5Zt5s3M783szPsQLH/Ecv/5D9CN4LZp3b4uYBRhWMEhfIPOFyoYwAiYIOBVdT1zny7KlzKiXygCodPVNicQjgGHMjmkPBCY/1Xl/udxaWUaGxHOBVCb1N0qnBYYU9iS13g4TuCrwqwoM426vMuqKzOA4+t1YAzYkNVYgvxPYNZ4ciGL3kwAjq93gZNZDOSQfWo8OZB2XGqAmq8vFfakVVxETsE0Paml0ZEKwPFV0ygrW8Z4kuhfooDj62tgpGznUup7ZDw53E+2L8Aq5XxfFhGuNly51EuoJ4AzpZdRJlLOVLxYhZGgzdaK8LiQHmHCuHIlTkcsgDOtwwQ8AzbmNhwxWsJk/KDCfjMub//0JxZgyNebAmdzO7/QoZZmrQQAFG41PTmXCDDk6xGBh4WcXwGAUKXC0aYn81Hf/oqA4+sN4PxAAgi3m64sy4w4gHLKZskp1Amq8L7hyq6eEahd0x3a5mPh2V+hFArVBsLOlisfuj4ui4AzpadQ7gwygApnmq7MxAP4Ogl4gwwA+MaTeixAzdc5hdFBBhC41/DkeK8IPAf2JgJIug7d7Z6dPpDmSdf5XxhP9vUC+AZs6mcrUA626vIkjT9ZZRZXAG8Sxn03nmxeswB2p9Ba+IntLqPWNzLrlxJhaSptD/wvFnOLAHYvp63f0IRRsHpL2Ukj2zf1HQibj1W6CyWrD7YiEOXskbMuTRfkix0tRiDsPdztQlh9vL7K/8TKXHBEIOy9YlpKJ5sv+aLFxNpr1riKaOVFd77SXu6oxDuycs2Vr816gN/jFqRAWR1aBgAAAABJRU5ErkJggg==",
                iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADwUlEQVRoQ+2ZTWgdVRTHz5kJSLuQunAhhkqhVhulseiiQgtNGrALBSN558yECFo1SldKF62rtqtKF203QhvaRCQk996QJhIFA1a7KBRR6YdioZYuYgsFFy0uKiV5c8oNd2T6MpPMpAnNFQeG95g595z/b879vgieX+i5fvgfIM3g4OBgc1NT05sA0IKIawEgva3JlL1FxP7+GgTBGBHdWorsP1QGnOguRHwDANorCpoAgMnp6emvenp6blQs+6/5ogCUUhsB4F1EfAcAnlxscFfuLxH5AgAGoii6UtVXZQCl1HEn/LGcYD8BwDcics3eYRj+YW3q9fqziLje3R0isjWn7D0LEkXRR1UgKgEYY4yI1BoCTNg6PTMz810cx3+WCT46OvpUvV63INaXrX7Z6xwzbyvjx9qUBlBKXULETRnHVnhfrVb7umywPLuRkZHXkyTpbQCZYuZnyvgtBaC1lqwzRPyQiPrKBChro5Tah4iHsvbMvKC+BQ2MMb+JyAupY0R8hYh+KSusip3W2nbDY5lYZ4ioYz4f8wI01vkyX6SK4CLbbMZF5EgURXuKbAsBtNb7AeBApmAnM49XEWiM+cF2s0T0YsVyL4vIz5kyB5j5YJ6PXABjTIuInAeAx20hEfk0iqLPqoho+ACFAop8GmN6ReSEe/83Ir5KRL832ucCKKVOIuJ7zniMmd+qIt7aPiyA83EaADrdRzwVRdH7CwJorV8DgG8zDWkHEX3/KACMMe0iciYTeyczTz7QIzYK01rb7vED93yAmXdVFb9UGXB++u20xWnoZ+a0Zsw+mlOFst1mkiRb4jj+8VECKKW2IKJtj/a6yszPFWbAGLNORK7PkiFeJqLWxYhfygxYX8aYKyLyvP0fhuGGrq6u2TnWnAwYY94WkS/du8PMvHclAGitPweA3VZLEAS7arXaQC6A1vooAHxsXyZJ0hbH8dmVADA8PLw9CAI7ptjrGDN/UgRgh3E7nNspcGt3d/fllQAwNDS0KQzDS07LODPPdq1zqpDW+gIAvOTaQDMR3cwDcH18GbZ0JM+O6IXlikZbY8zTIpKu2i4y8+YigNsAsMYBrCaifxqjNU7uylCUtUHEs0TUlhNzlYjcdc/vMPMT/1kA76uQ943Y727U+4HM+6mE7Zq8nsxZAO+n094vaGwWvF5Sunbg96LetQV/t1XSiZLXG1sZCH+3FlMIrzd3Uwivt9eL2oR77scBRyYT/h4xZSD8PeTLrle9PWbNW6R7edBddrdhOe0WPCNbzuBL4dt7gPtaw9JPjVtHHQAAAABJRU5ErkJggg==",
                text: "发布"
            }, {
                selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAELUlEQVRoQ+2ZT2gcdRTHP282UYslrf8CCbubhgaqraXiiuDNQKEeLOKhqVbxVNuDxuwkFbQnL+rBmN2NKDQ9Fiu1JxFFBLWiCIKNWkgUhSaZXbfEFlEMpEmz82QmyTabZHdnd2eSjeR3G+a97595b/783ggbfMkG18+mgfWu4GYFNkQFokl9HOUgQgyhBaUVyABp4HuUYVv5JNMrf3kxFB7QO0MGT6ryMMJeIAKEEbIoV4BvJMTHE93yZTm8ki0UTekxlGNArBwQMCLKmxOmvF8qti2hz6jwKrDHA+ZFhCGrR4aKxRY1EE3qh8AhDyTLQ07PzXEye0KuLT3R2q93NzTwBvB8FZhfWHHZv1reqgYiSf1T4J4qiNwUVX6WEEesl2TUOY4O6m7NcVaEfdViovxrmdK0PH+FgWhSfwHurZroZuIIBl3uoY1TTS8tU5JW4UI6Lp1LgwoMRBN6CnF73q81sgBUs/i8IGXIMuX44nHeQDSlMZQf/FIeKI7wkNUjFx2OmwYSmkToCZTYJ3BV3k2b8mKhgaSOATt84gga5g8rLuG8gXBCHzWEr4Jm9RPfVjozplxwWyiS0KdFOOsnQdBYqhxJm/LBvIGk9gn0B03qJ77CiXRc3t6wBkR5ecKUftdANKnPAmf8vEKBYynPWaacWazAAYHPAif1kUBtDqR75XPXwO7X9Jap7fwE3OcjR5BQM1tbaRrtktn8iyyS1JMCrwfJ6iP2OSsuTxW+yN7TO7jB16i7wajnNQPst+LybYEB92ZOaRfKuXpWr0pf2pSBRY0rP6dTehrlaJ2ayLdOUQPt/dqWa+BT596uMxMjEuLgRLc432z5teqOLDygew2D88CuejAhcElCHB7vll+X6ym6J96R0AdsOI/Qsa4mhB9tOJzpkd9X01FuKuFscpxKtK+TiWGUQ5Ypl4vxl53MtQ/qvpzyEUrbWppw20Z5YtyU8VK8ZQ24j9cB3YPhfmq4m4g1WKNzOR7L9okzOCu5PBlwENqTuiuHu+lpKQday3kRfrMNOtPdkvWC49mAAxYZ1J2S4zuEZi/gVcSMheCRsbhMes2tyIBbifn3hDMRuMsrice49NwWHsweL5zolcut2IBbiXe0VXI4M5/t5Qg8nr9i29zvdTi8FLMqAw7Azre0+UYjzrN5xbjPo+j5MOVawwwdl1+RfyrKWwiu2oCT74zJDQMLuL0acuDv6UYiV1+QqSrza/9H1jGoTbPKJMptFYqYsm2aM70yXWFeQXhNFVhECg/oFsPAaYFGT2KE61tb2ObsqDzFlwjyxYCDHzuljVenuQ4YZUTlrFZupUtytYp38n0zMH9DqkRSTBb9t+DO+NkGon6I99/Agqoif3eK/mWpxYy/FViixB3XQ0xtZlUYzsTlUi1Ci+UGZiAIsathbhpYqyv9v22h/wApaT5AcvyJYQAAAABJRU5ErkJggg==",
                iconPath: "data:image/png;base64,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",
                text: "收藏"
            }, {
                selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADxklEQVRoQ+2ZXWgcVRTHf2e66ZOISh6k6U60D1asYEGxghQUA0WqKEIpUlTatxbNzgRsi4hWoWBFMpMoQfDNxg/8eBE/asmDqAVpH7RiwQep2dkUocUWRbGoO0c2IeJHd8+9M7MJhc7r+Z//Ob9z9947wwoX+SMXef9cAljuFax8BYZe0uuCP7k+UAYVBkXQXDkTBJxut/libkzOVgldCcCqF3SwNsCDqjwgcEevBhXeCJQPmrG8VgVIaYDhRHeosBtY69nQEYTJrCFveeb9S14YoDP1gRqvKNxfpgHg3ZUBO74blZ+L+BQCGJrUm1Yoh1CuLlL0fznCZ0HOw7OxzPr6eQOsHtehIGDOt5ClV+V4PsBdpx6VHy3tP+PeAGGqXwLrfYp4aF/OItnpofe7yMJED7CwYfv5PJJF8qprAecVCBO9HeFzV+OiOoGv2zm3zY3Jby4e7gCpvglsdTEtrRH2ZA153sXHCaCe6iaBQy6GFWlO1c6z7uRe+cnycwIYTnW/whOWWZVxETY3G/Kh5ekEECb6KcJGy6zKuAj7mw150vJ0A0hVLaOq4wqftCK50/I1AeZf1GqcsYz6EP8hi2SV5WsCXJvq2jZ8axn1I147zxXWRjYBlur8v9AA8pwNc2NytNdwbIBJvYGcE/2YsOUpf7Cm+bh8Xwpg9bheFQR4vWBZjTnGf80iuczSmivQMQhT7Vwol1tmFcePZZHcanm6AnwDrLPMKo5PZ5E8ZHm6AST6PsJmy6zSuLAva8gzlqcTQD3VrQKdl7mletrBCm6cfUzM49sJYH4fJHoM4ZalIFB4vRXJNpda7gCpjgITLqZlNQr3tSJ5z8XHHWBKr+R3jgN1F+MSGqfTZ9HfGaCTMJzoNhWmSzRnpZ5DuTeL5YglLATQSaonulOEKdcCXjplSxbLOz45XiuwaBxO6G6UAz6FTK0ymsXyoqn7j6AQwPxKpBoLPAuY173R1C8KT7UiSXyb7+gLA3SSr0l0fS48B2wqUhz4OFD2zsbyVcH8cgB//6QSjRD8JqjEWSxp0cYLb+JuBUPPz84sklKrXxogXLgXRhR2Wf8JdIPufPcKTLGSmWyXnCuyGl5TCBNdQ8AIygiwpUjBHjlvI8yQM5PFctLV2wmgPq4bg4DtCttdjUvphIPaZro1Joctn54Aw4nerTLfdNXTtvpaiAuHyZnOYjnYLaErQDihT6Psc6vUZ1WPb4PuAJ6nSp8R6HZq9QK4B+Hmfjfm4i85R5uxfHQhrdMmdimyXJpLAMs1+dI38XI3vlj/L/VgEEAZZtRVAAAAAElFTkSuQmCC",
                iconPath: "data:image/png;base64,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",
                text: "我的"
            }]
        }
    }
}

pages变量,表示当前页面传给组件的自定义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'
            }
        }
    ]
}

scriptmethods 中编写事件方法代码 无

在测试项目的components下建立组件 此处建立的组件,需要符合easycom规范,这样就可以不用import就可以轻松被调用,示例代码组件有:

templates组件 该组件用来作为页面模板的“路由”,根据条件判断pageTmpl的值来决定加载哪一个页面模板,内容如下(实际根据需要修改): 在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>

script部分定义一个属性page

props: {
    page: Object
},

页面模板组件 示例代码中有5个页面模板组件:testPage1~testPage5,下面以testPage1组件为例介绍,其它几个组件同理 在template部分可以写任何需要的代码,此处示例为:

<template>
    <view>
        <!-- 循环100次,让数据可以充满列表,垂直滚动,测试换页时数据是否会重新刷新加载。希望切换页面时数据不刷新,达到要求! -->
        <view v-for='count in 100' :key="count">[{{count}}] - {{pageData.text}}</view>
    </view>
</template>

script部分定义一个属性pageData 此属性接收调用方传过来的页面数据

props: {
    pageData: Object
},

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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