🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **一、标题栏 组件** ~~~ 标题名称设置、标题风格选择。 ~~~ ![](https://img.kancloud.cn/16/cb/16cbf0799f86cfcdaf416c270dca3422_1790x427.png) :-:![](https://img.kancloud.cn/ce/50/ce5064bd7df4342ed6025cd1f3a11921_1821x582.png) ## **二、选项卡 组件** ~~~ 不同选项卡,展示不同的内容,实现不跳转页面显示更多内容 ~~~ ![](https://img.kancloud.cn/ff/3c/ff3c475beeece9a6940882bb7549130c_802x538.png) ~~~ 选项卡样式设置,可以将其他组件拖拽到选项卡中 ~~~ ![](https://img.kancloud.cn/e4/bd/e4bde2073e936408f1fb855012790e80_1034x665.png) :-:![](https://img.kancloud.cn/be/7c/be7cfd9292bd2b13ac7dd57406cf38dc_909x686.png) ~~~ 选项卡置顶属性,可以实现底部固定效果 ~~~ ![](https://img.kancloud.cn/7d/24/7d242c33897ed1501fae103ffa524da6_1043x539.png) ## **三、图片轮播 组件** 图片可添加超链接、轮转方式、图片切换时间。 :-:![](https://img.kancloud.cn/ce/2c/ce2cc71bec7c01d3ba027983de4f3350_1837x565.png) :-:![](https://img.kancloud.cn/e3/da/e3dad558c9a982093fde3abe588be4cc_1852x877.png) ## **四、图片橱窗 组件** ~~~ 列行数、列宽度设置图片展示大小。 ~~~ ![](https://img.kancloud.cn/74/85/7485cceb239239d0f038043790c3546a_1831x617.png) ## **五、图标组 组件** ~~~ 【图标组】可设置每行显示个数,如图标较多,可插入多个【图标组】组件 ~~~ ![](https://img.kancloud.cn/d4/75/d475bee5abf9e40faa8ce7dca9cf441a_823x816.png) ~~~ 系统内置各种图标可选择使用,亦可自己上传图标 ~~~ ![](https://img.kancloud.cn/5d/0d/5d0deea51b05302c596825005b4b940a_900x816.png) ~~~ 可设置固定置底,并选择【底部菜单】风格,用于非全局底部菜单场景 ~~~ > ##### 1、固定置底 > > ![](https://img.kancloud.cn/b3/5d/b35d6bd7eed5bdf6d07bcbe62d09263f_573x534.png) > > ##### 2、设置风格 > > ![](https://img.kancloud.cn/b6/ad/b6adfebb9c9ac0cd4fc2a65625ff0598_900x816.png) ## **六、菜单组 组件** ~~~ 竖版图标,一般用于个人中心 ~~~ ![](https://img.kancloud.cn/57/e4/57e4c14636d065bc05984874690c4483_1095x655.png) > 可以添加多个 ## **七、按钮组合 组件** ~~~ 可固定底部,可放置页面中,一行可多个按钮 ~~~ ![](https://img.kancloud.cn/a6/b3/a6b3cacea6df9aac26ed295a5fcd2f81_1841x768.png) > 1、固定底部 > 在内容设置中,开启固定底部开关 > 2、调节按钮宽度 > 固定底部开关下方,鼠标点击按钮间的竖线,鼠标拖动竖线,调节按钮宽度 > 3、添加按钮 > 在内容设置中,点击添加一个按钮 ## **八、公告 组件** ~~~ 公告可跳转至页面、表单记录、功能按键、外部链接等。 ~~~ ![](https://img.kancloud.cn/5c/45/5c45ba38185aa47a98cc76f9a71fec48_1250x681.png) > 可调用文章分类,实现多条公告 ## **九、 视频 组件** ~~~ 支持MP4.、优酷、腾讯视频播放。 ~~~ ![](https://img.kancloud.cn/e4/be/e4be6f7860405917a12b3bf86c353a0b_1849x755.png) ## **十、地图 组件** ~~~ 拾取坐标 ~~~ ![](https://img.kancloud.cn/1b/85/1b8552e9c7851bed959e04a13528429f_1851x757.png) :-:![](https://img.kancloud.cn/71/7b/717be94c67b1d189071ea6e1d785b3f8_1257x594.png) ## **十一、分割线 组件** ~~~ 分割线风格选择 ~~~ ![](https://img.kancloud.cn/17/6d/176d0e70683ce34edfd2f97352c2f1af_1845x630.png) ## **十二、音频播放 组件** * * * ~~~ 图标及封面的隐藏、播放设置,图标显示位置。 ~~~ ![](https://img.kancloud.cn/ce/00/ce00eb9f18ef2a1f41f22cb4b5154837_1852x799.png) ## **十三、富文本 组件** * * * ~~~ 适用于大段落内容排版,建议设置 内边距、背景图 等样式 ~~~ ~~~ 【小程序】的 【富文本】内,不支持插入视频及设置跳转链接 ~~~ ![](https://img.kancloud.cn/67/b1/67b1cccfa4ce7f9e1048f99ffd5cab66_802x816.png) ~~~ 可使用内容编辑器,与文章编辑器一致 ~~~ ![](https://img.kancloud.cn/21/9c/219cdb50003647816d05bada7bb41b2f_900x816.png) ~~~ 富文本内容插入图片 ~~~ :-:![](https://img.kancloud.cn/c2/c7/c2c75204f1044c92b9e21e5eb52ae63e_528x773.png) ### **十四、JS代码 组件** * * * ~~~ 引用js代码 ~~~ ![](https://img.kancloud.cn/ca/f2/caf2e2c9a4386831124a3864c4d7ad32_1004x650.png) **举例:禁止页面分享** ~~~ function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { onBridgeReady(); } ~~~ > 不支持小程序使用 ## **十五、嵌入网页 组件** * * * ~~~ 直接在页面中签入其他站点页面 ~~~ ![](https://img.kancloud.cn/e0/c5/e0c5ae08789533ed5668cb4186863a56_1051x639.png) > 小程序不能使用此组件