molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-06-18 13:41:09 +08:00
parent 0533aa0ebf
commit 1fdc7f8831
87 changed files with 2130 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vuepress/dist/pages/base/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/baseStart/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/avatar/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/background/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/button/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/icon/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/11.94510164.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/11.388aba94.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" aria-current="page" class="active sidebar-link">图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#引入样式" class="sidebar-link">引入样式</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#使用语法" class="sidebar-link">使用语法</a></li></ul></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" aria-current="page" class="active sidebar-link">图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#引入样式" class="sidebar-link">引入样式</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#使用语法" class="sidebar-link">使用语法</a></li></ul></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">图标<!----></h1> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>点击右侧图标页面，对应的图标，即可复制类名：<code>cuIcon-图标名称</code></p></div> <h2 id="引入样式"><a href="#引入样式" class="header-anchor">#</a> 引入样式</h2> <p>编辑 <code>App.vue</code>文件在<code>&lt;style&gt;</code> 项引入 <code>icon.css</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">图标<!----></h1> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>点击右侧图标页面，对应的图标，即可复制类名：<code>cuIcon-图标名称</code></p></div> <h2 id="引入样式"><a href="#引入样式" class="header-anchor">#</a> 引入样式</h2> <p>编辑 <code>App.vue</code>文件在<code>&lt;style&gt;</code> 项引入 <code>icon.css</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;colorui/main.css&quot;</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;colorui/icon.css&quot;</span><span class="token punctuation">;</span></span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
@@ -43,6 +43,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/11.94510164.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/11.388aba94.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/layout/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/loading/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/17.15374680.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/17.31e8ea2a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" aria-current="page" class="active sidebar-link">加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#弹窗加载" class="sidebar-link">弹窗加载</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#进度条加载" class="sidebar-link">进度条加载</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" aria-current="page" class="active sidebar-link">加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#弹窗加载" class="sidebar-link">弹窗加载</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#进度条加载" class="sidebar-link">进度条加载</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
@@ -96,6 +96,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/17.15374680.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/17.31e8ea2a.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/progress/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/shadow/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/16.da09304c.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/16.ff717b47.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" aria-current="page" class="active sidebar-link">边框阴影</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#边框" class="sidebar-link">边框</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#阴影" class="sidebar-link">阴影</a></li></ul></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" aria-current="page" class="active sidebar-link">边框阴影</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#边框" class="sidebar-link">边框</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#阴影" class="sidebar-link">阴影</a></li></ul></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">边框阴影<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h2> <p>在需要加边框的元素加上 class 类名 <code>solid</code>，加粗的就是 <code>solids</code>，然后还有单独四个不同的方向 <code>solid-top|...</code></p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.solid 四周
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">边框阴影<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h2> <p>在需要加边框的元素加上 class 类名 <code>solid</code>，加粗的就是 <code>solids</code>，然后还有单独四个不同的方向 <code>solid-top|...</code></p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.solid 四周
.solid-top 上
.solid-right 右
.solid-bottom
@@ -60,6 +60,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/16.da09304c.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/16.ff717b47.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/tag/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/text/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/bottom/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/18.93fef267.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/18.78def283.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" aria-current="page" class="active sidebar-link">底部操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" aria-current="page" class="active sidebar-link">底部操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
@@ -221,6 +221,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/18.93fef267.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/18.78def283.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/bar/search/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/title/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/19.86d5c6c8.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/19.4f034cd4.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" aria-current="page" class="active sidebar-link">标题操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" aria-current="page" class="active sidebar-link">标题操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
@@ -90,6 +90,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/19.86d5c6c8.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/19.4f034cd4.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/bar/top/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/20.b480e9bf.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/20.76bc794a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" aria-current="page" class="active sidebar-link">顶部操作条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#自定义操作条-导航栏" class="sidebar-link">自定义操作条（导航栏）</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#使用原生小程序开发" class="sidebar-link">使用原生小程序开发</a></li></ul></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" aria-current="page" class="active sidebar-link">顶部操作条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#自定义操作条-导航栏" class="sidebar-link">自定义操作条（导航栏）</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#使用原生小程序开发" class="sidebar-link">使用原生小程序开发</a></li></ul></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">顶部操作条<!----></h1> <div class="theme-vdoing-content content__default"><p>顶部操作条设置属于自定义导航栏，接下来会给大家讲解配置。</p> <h2 id="自定义操作条-导航栏"><a href="#自定义操作条-导航栏" class="header-anchor">#</a> 自定义操作条（导航栏）</h2> <ol><li><p>导航栏作为常用组件 <code>color-ui</code> 里有做简单封装，你也可以直接复制代码结构自己修改，达到个性化目的。</p></li> <li><p><code>App.vue</code> 获得系统信息</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">顶部操作条<!----></h1> <div class="theme-vdoing-content content__default"><p>顶部操作条设置属于自定义导航栏，接下来会给大家讲解配置。</p> <h2 id="自定义操作条-导航栏"><a href="#自定义操作条-导航栏" class="header-anchor">#</a> 自定义操作条（导航栏）</h2> <ol><li><p>导航栏作为常用组件 <code>color-ui</code> 里有做简单封装，你也可以直接复制代码结构自己修改，达到个性化目的。</p></li> <li><p><code>App.vue</code> 获得系统信息</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
uni<span class="token punctuation">.</span><span class="token function">getSystemInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// #ifndef MP</span>
@@ -96,6 +96,6 @@ Vue.component('cu-custom',cuCustom)
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/20.b480e9bf.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/20.76bc794a.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/card/index.html
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/chat/index.html
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/form/index.html
Vendored
+10 -10
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/list/index.html
Vendored
+8 -8
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/modal/index.html
Vendored
+171 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/nav/index.html
Vendored
+5 -5
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/22.5c8e7d4a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/22.8ff6b731.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" aria-current="page" class="active sidebar-link">导航栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/nav/#导航栏相关class" class="sidebar-link">导航栏相关class</a></li></ul></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" aria-current="page" class="active sidebar-link">导航栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/nav/#导航栏相关class" class="sidebar-link">导航栏相关class</a></li></ul></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">导航栏<!----></h1> <div class="theme-vdoing-content content__default"><p>nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 <a href="https://uniapp.dcloud.io/component/scroll-view" target="_blank" rel="noopener noreferrer">uni-app 的文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，类名 nav 和 cu-item 是必选值</p> <h3 id="默认"><a href="#默认" class="header-anchor">#</a> 默认</h3> <p>通过一个变量来控制当前已选中的tab</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-x</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span> <span class="token attr-name">:scroll-left</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollLeft<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">导航栏<!----></h1> <div class="theme-vdoing-content content__default"><p>nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 <a href="https://uniapp.dcloud.io/component/scroll-view" target="_blank" rel="noopener noreferrer">uni-app 的文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，类名 nav 和 cu-item 是必选值</p> <h3 id="默认"><a href="#默认" class="header-anchor">#</a> 默认</h3> <p>通过一个变量来控制当前已选中的tab</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-x</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span> <span class="token attr-name">:scroll-left</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollLeft<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index==TabCur?'text-green cur':''<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in 10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabSelect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tab{{index}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
@@ -72,7 +72,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-clothesfill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span> 皮肤
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="导航栏相关class"><a href="#导航栏相关class" class="header-anchor">#</a> 导航栏相关class</h2> <table><thead><tr><th>class</th> <th>说明</th> <th>可选值</th></tr></thead> <tbody><tr><td>nav</td> <td>导航栏必选值</td> <td>——</td></tr> <tr><td>cu-item</td> <td>导航栏子元素</td> <td>——</td></tr> <tr><td>flex</td> <td>flex布局</td> <td>——</td></tr> <tr><td>flex-sub</td> <td>flex:1，平分</td> <td>——</td></tr> <tr><td>text-center</td> <td>居中</td> <td>——</td></tr></tbody></table></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/bar/search/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">搜索&amp;按钮组&amp;输入操作条</div></a> <a href="/colorui-document/pages/component/list/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">列表</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><h2 id="导航栏相关class"><a href="#导航栏相关class" class="header-anchor">#</a> 导航栏相关class</h2> <table><thead><tr><th>class</th> <th>说明</th> <th>可选值</th></tr></thead> <tbody><tr><td>nav</td> <td>导航栏必选值</td> <td>——</td></tr> <tr><td>cu-item</td> <td>导航栏子元素</td> <td>——</td></tr> <tr><td>flex</td> <td>flex布局</td> <td>——</td></tr> <tr><td>flex-sub</td> <td>flex:1，平分</td> <td>——</td></tr> <tr><td>text-center</td> <td>居中</td> <td>——</td></tr></tbody></table></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/17, 23:53:47</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/bar/search/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">搜索&amp;按钮组&amp;输入操作条</div></a> <a href="/colorui-document/pages/component/list/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">列表</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/component/bar/search/" class="prev">搜索&amp;按钮组&amp;输入操作条</a></span> <span class="next"><a href="/colorui-document/pages/component/list/">列表</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
@@ -88,6 +88,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/22.5c8e7d4a.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/22.8ff6b731.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/steps/index.html
Vendored
+74 -5
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/swiper/index.html
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/timeline/index.html
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/plugin/animation/index.html
Vendored
+40 -5
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/32.e86ce51e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/32.956d7d1e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,13 +18,48 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" aria-current="page" class="active sidebar-link">微动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/animation/#操作条" class="sidebar-link">操作条</a></li></ul></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" aria-current="page" class="active sidebar-link">微动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/animation/#微动画" class="sidebar-link">微动画</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/animation/#gif动画" class="sidebar-link">gif动画</a></li></ul></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">微动画<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/animation</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/indexes/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">索引动画</div></a> <a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">全屏抽屉</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">微动画<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="微动画"><a href="#微动画" class="header-anchor">#</a> 微动画</h2> <ol><li><p>加上类名 <code>animation-fade|...</code> 即可实现动画</p></li> <li><p>加上类名 <code>animation-reverse</code> 反向动画</p></li> <li><p>延迟动画加上 style <code>animation-delay: 1s</code></p></li></ol> <div class="language-css extra-class"><pre class="language-css"><code>.animation-fade <span class="token comment">/* 淡入 */</span>
.animation-scale-up <span class="token comment">/* 放大 */</span>
.animation-scale-down <span class="token comment">/* 缩小 */</span>
.animation-slide-top <span class="token comment">/* 从上向下滑动 */</span>
.animation-slide-bottom <span class="token comment">/* 从下向上滑动 */</span>
.animation-slide-left <span class="token comment">/* 从左向右滑动 */</span>
.animation-slide-right <span class="token comment">/* 从右向左滑动 */</span>
.animation-shake <span class="token comment">/* 摇动 */</span>
</code></pre></div><h2 id="gif动画"><a href="#gif动画" class="header-anchor">#</a> gif动画</h2> <ol><li>看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>margin radius bg-gradual-green shadow-blur<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/wave.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scaleToFill<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-black response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>100upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>margin flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black flex-sub margin-right radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/loading-black.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-black response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white flex-sub radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/loading-white.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-white response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>margin flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-gradual-blue flex-sub margin-right radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/rhomb-black.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-black response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white flex-sub radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/rhomb-white.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-white response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>margin flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white flex-sub margin-right radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/loading-1.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-white response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black flex-sub radius shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/loading-2.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-black response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/indexes/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">索引列表</div></a> <a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">全屏抽屉</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/plugin/indexes/" class="prev">索引动画</a></span> <span class="next"><a href="/colorui-document/pages/plugin/drawer/">全屏抽屉</a>→
<a href="/colorui-document/pages/plugin/indexes/" class="prev">索引列表</a></span> <span class="next"><a href="/colorui-document/pages/plugin/drawer/">全屏抽屉</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
@@ -38,6 +73,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/32.e86ce51e.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/32.956d7d1e.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/drawer/index.html
Vendored
+178 -4
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/33.4a1b8e35.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/33.22f2c5eb.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,185 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" aria-current="page" class="active sidebar-link">全屏抽屉</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/drawer/#操作条" class="sidebar-link">操作条</a></li></ul></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" aria-current="page" class="active sidebar-link">全屏抽屉</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/drawer/#全屏抽屉" class="sidebar-link">全屏抽屉</a></li></ul></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">全屏抽屉<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/drawer</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">微动画</div></a> <a href="/colorui-document/pages/plugin/verticalnav/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">垂直导航</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">全屏抽屉<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="全屏抽屉"><a href="#全屏抽屉" class="header-anchor">#</a> 全屏抽屉</h2> <ol><li><p>全屏抽屉效果主要分为三个部分，主要有三个类名</p></li> <li><p>第一个类名 <code>DrawerPage</code>，就是第一张图总体外部包裹的类名</p></li> <li><p>第二个类名 <code>DrawerClose</code>，用来包裹打开抽屉之后关闭部分</p></li> <li><p>第三个类名 <code>DrawerWindow</code>，就是打开的抽屉部分了</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-gradual-blue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
// 全屏主体页面
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>DrawerPage<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>modalName=='viewModal'?'show':''<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cu-custom</span> <span class="token attr-name">bgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-gradual-blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isBack</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>backText<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>返回<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>全屏抽屉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cu-custom</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>padding margin text-center<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>cu-btn bg-green lg block shadow radius margin-xl<span class="token punctuation">'</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
打开抽屉
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item arrow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in 20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-github text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index +1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>padding margin text-center<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>cu-btn bg-green lg block shadow radius margin-xl<span class="token punctuation">'</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
打开抽屉
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
// 关闭部分
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>DrawerClose<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>modalName=='viewModal'?'show':''<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hideModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-pullright<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
// 抽屉部分
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>DrawerWindow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>modalName=='viewModal'?'show':''<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item arrow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in 20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-github text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index +1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">modalName</span><span class="token operator">:</span><span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">showModal</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>modalName <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>target
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">hideModal</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>modalName <span class="token operator">=</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 这个函数没用到，我也不知道为什么源码作者写了</span>
<span class="token function">tabSelect</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>TabCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scrollLeft <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">60</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">page</span> <span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradualBlue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0vw<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.4s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage.show</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.9<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 85vw<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 60upx <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerWindow</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 85vw<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.9<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">pointer-events</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.4s<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 100upx 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerWindow.show</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">pointer-events</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerClose</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 40vw<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>90deg<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.01<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 50upx<span class="token punctuation">;</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">pointer-events</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.4s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerClose.show</span> <span class="token punctuation">{</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">pointer-events</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 15vw<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .cu-bar.tabbar .action button.cuIcon</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 64upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 64upx<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 64upx<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .cu-bar.tabbar .action .cu-avatar</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .nav</span> <span class="token punctuation">{</span>
<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .nav .cu-item.cur</span> <span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .nav .cu-item.cur::after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> currentColor<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.DrawerPage .cu-bar.tabbar .action</span> <span class="token punctuation">{</span>
<span class="token property">flex</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">微动画</div></a> <a href="/colorui-document/pages/plugin/verticalnav/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">垂直导航</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/plugin/animation/" class="prev">微动画</a></span> <span class="next"><a href="/colorui-document/pages/plugin/verticalnav/">垂直导航</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
@@ -38,6 +212,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/33.4a1b8e35.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/33.22f2c5eb.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/indexes/index.html
Vendored
+205 -5
View File
@@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>索引动画 | ColorUI 使用文档</title>
<title>索引列表 | ColorUI 使用文档</title>
<meta name="generator" content="VuePress 1.9.2">
<link rel="icon" href="/colorui-document/img/colorui-logo.png">
<meta name="description" content="ColorUI 使用文档">
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/31.b6cd50a8.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/34.4aeb1a30.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/31.e6a3e307.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,211 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" aria-current="page" class="active sidebar-link">索引动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/indexes/#操作条" class="sidebar-link">操作条</a></li></ul></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" aria-current="page" class="active sidebar-link">索引列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/indexes/#使用" class="sidebar-link">使用</a></li></ul></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">索引动画<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/indexes</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/steps/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">步骤条</div></a> <a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">微动画</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">索引列表<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <ol><li><p>索引列表主要由 <code>scroll-view</code> 标签实现，类名为 <code>indexes</code>，具体js逻辑请看源码</p></li> <li><p>我个人没有使用过这个，大家根据源码来看一下，我也有些地方没弄懂</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-bar bg-white search fixed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search-form round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>输入搜索的关键词<span class="token punctuation">&quot;</span></span> <span class="token attr-name">confirm-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-btn bg-gradual-green shadow-blur round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indexes<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:scroll-into-view</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>indexes-'+ listCurID<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{height:'calc(100vh - 50px)'}]<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:scroll-with-animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:enable-back-to-top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 这个'indexItem-' + item.name类名，整个colorUI，我也没找到它的作用，删了也没发现什么影响--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>indexItem-' + item.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>indexes-' + item.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>padding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-list menu-avatar no-padding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(items,sub) in 2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sub<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar round lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-abc<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{list[sub].name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>君<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
有{{sub+2}}个主子需要伺候
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indexBar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{height:'calc(100vh - 50px)'}]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indexBar-box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tStart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchend</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tEnd<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchmove.stop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tMove<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indexBar-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getCur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchend</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setCur<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--选择显示--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indexToast<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
{{listCur}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">StatusBar</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>StatusBar<span class="token punctuation">,</span>
<span class="token literal-property property">CustomBar</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>CustomBar<span class="token punctuation">,</span>
<span class="token literal-property property">hidden</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">listCurID</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">listCur</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">26</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
list<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">65</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> list<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCur <span class="token operator">=</span> list<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token comment">//这两句大概知道什么意思，但是emmm,这个boxTop和barTop具体是什么数值，不是很理解</span>
uni<span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.indexBar-box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>boxTop <span class="token operator">=</span> res<span class="token punctuation">.</span>top
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
uni<span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.indexes'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>barTop <span class="token operator">=</span> res<span class="token punctuation">.</span>top
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">//获取文字信息</span>
<span class="token function">getCur</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCur <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setCur</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCur <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>listCur
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//滑动选择Item</span>
<span class="token function">tMove</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>boxTop<span class="token punctuation">)</span>
<span class="token keyword">let</span> y <span class="token operator">=</span> e<span class="token punctuation">.</span>touches<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>clientY<span class="token punctuation">,</span>
offsettop <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>boxTop<span class="token punctuation">,</span>
that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token comment">//判断选择区域,只有在选择区才会生效</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>y <span class="token operator">&gt;</span> offsettop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 这个num计算结果怎么就是字母列表的下标呢，我没想明白，望大佬指教</span>
<span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">(</span>y <span class="token operator">-</span> offsettop<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCur <span class="token operator">=</span> that<span class="token punctuation">.</span>list<span class="token punctuation">[</span>num<span class="token punctuation">]</span><span class="token punctuation">.</span>name
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//触发全部开始选择</span>
<span class="token function">tStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//触发结束选择</span>
<span class="token function">tEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCurID <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>listCur
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//源码中有这个函数，但是这个页面中根本没有用到，删了没影响，我也不明白作者为什么写这个</span>
<span class="token function">indexSelect</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> barHeight <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>barHeight<span class="token punctuation">;</span>
<span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">;</span>
<span class="token keyword">let</span> scrollY <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span>length <span class="token operator">*</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>y <span class="token operator">/</span> barHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>scrollY <span class="token operator">&lt;</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>listCur <span class="token operator">=</span> list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
that<span class="token punctuation">.</span>movableY <span class="token operator">=</span> i <span class="token operator">*</span> <span class="token number">20</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">page</span> <span class="token punctuation">{</span>
<span class="token property">padding-top</span><span class="token punctuation">:</span> 100upx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.indexes</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.indexBar</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 20upx 20upx 20upx 60upx<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.indexBar .indexBar-box</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 40upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 20upx <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.indexBar-item</span> <span class="token punctuation">{</span>
<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 40upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 40upx<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 24upx<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">movable-view.indexBar-item</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 40upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 40upx<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 9<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">movable-view.indexBar-item::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 20upx<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 4upx<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f37b1d<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.indexToast</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 80upx<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100upx<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10upx<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 100upx<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 48upx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/steps/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">步骤条</div></a> <a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">微动画</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/component/steps/" class="prev">步骤条</a></span> <span class="next"><a href="/colorui-document/pages/plugin/animation/">微动画</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
@@ -38,6 +238,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/31.b6cd50a8.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/31.e6a3e307.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/verticalnav/index.html
Vendored
+231 -4
View File
@@ -10,7 +10,7 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.98d9df19.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/34.4aeb1a30.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.94510164.js"><link rel="prefetch" href="/colorui-document/assets/js/12.971ac3e8.js"><link rel="prefetch" href="/colorui-document/assets/js/13.d8c0c958.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.c972ac38.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.86d5c6c8.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.027d9b1c.js"><link rel="prefetch" href="/colorui-document/assets/js/24.0844608f.js"><link rel="prefetch" href="/colorui-document/assets/js/25.fcf0e5b0.js"><link rel="prefetch" href="/colorui-document/assets/js/26.ad3d9337.js"><link rel="prefetch" href="/colorui-document/assets/js/27.a51b4d48.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8d4e487e.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.b6cd50a8.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.4a1b8e35.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.aad47f8a.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.a0cdad8d.js"><link rel="prefetch" href="/colorui-document/assets/js/9.b3cccf5b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/34.f43470a7.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,238 @@
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引动画</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" aria-current="page" class="active sidebar-link">垂直导航</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/verticalnav/#操作条" class="sidebar-link">操作条</a></li></ul></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>快速开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础元素</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>交互组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件扩展</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" aria-current="page" class="active sidebar-link">垂直导航</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/verticalnav/#操作条" class="sidebar-link">操作条</a></li></ul></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">垂直导航<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/verticalnav</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">全屏抽屉</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">垂直导航<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <ol><li><p>垂直导航主要有两个 <code>scroll-view</code> 标签实现</p></li> <li><p>分别是左侧的导航栏部分和右侧的内容部分，左侧导航栏部分使用类名 <code>VerticalBox</code>，右侧内容部分使用类名 <code>VerticalMain</code></p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cu-custom</span> <span class="token attr-name">:isBack</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-shadeTop text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>backText<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>返回<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>垂直导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cu-custom</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>screen-swiper round-dot<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:indicator-dots</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:circular</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:autoplay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">interval</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5000<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in 4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticalBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticalNav nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">scroll-with-animation</span> <span class="token attr-name">:scroll-top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>verticalNavTop<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span><span class="token function">calc</span><span class="token punctuation">(</span>100vh - 375upx<span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index==tabCur?'text-green cur':''<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TabSelect<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:data-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tab-{{item.name}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticalMain<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">scroll-with-animation</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span><span class="token function">calc</span><span class="token punctuation">(</span>100vh - 375upx<span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span>
<span class="token attr-name">:scroll-into-view</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>main-'+mainCur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@scroll</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticalMain<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>padding-top padding-lr<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>main-'+index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-bar solid-bottom bg-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-title text-green<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span> Tab-{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-list menu-avatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar round lg<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>凯尔<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-infofill text-red margin-right-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey text-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>22:20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-grey sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar round lg<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/img/champion/Taric.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>瓦洛兰之盾-塔里克<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-orange sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>战士<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey text-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>22:20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-notice_forbid_fill text-gray<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item <span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar radius lg<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-pink<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>莫甘娜<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>凯尔，你被自己的光芒变的盲目！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey text-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>22:20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-red sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item grayscale<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar radius lg<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>伊泽瑞尔<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-orange sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>断开连接...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 等我回来一个打十个<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey text-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>22:20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-red sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item cur<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-avatar radius lg<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>瓦罗兰大陆-睡衣守护者-新手保护营<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-tag round bg-orange sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>6人<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray text-sm flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-cut<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 伊泽瑞尔：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-locationfill text-orange margin-right-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span> 传送中...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-grey text-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>22:20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cuIcon-notice_forbid_fill text-gray<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">tabCur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">mainCur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">verticalNavTop</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">load</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'加载中...'</span><span class="token punctuation">,</span>
<span class="token literal-property property">mask</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">26</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
list<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">65</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">=</span> i<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> list<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>listCur <span class="token operator">=</span> list<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
uni<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">TabSelect</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>tabCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>mainCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>verticalNavTop <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 希望有大佬给我讲解一下这个双向联动函数</span>
<span class="token function">VerticalMain</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// #ifdef MP-ALIPAY</span>
<span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token comment">//支付宝小程序暂时不支持双向联动 </span>
<span class="token comment">// #endif</span>
<span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> tabHeight <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>load<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> view <span class="token operator">=</span> uni<span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">&quot;#main-&quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
view<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>top <span class="token operator">=</span> tabHeight<span class="token punctuation">;</span>
tabHeight <span class="token operator">=</span> tabHeight <span class="token operator">+</span> data<span class="token punctuation">.</span>height<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>bottom <span class="token operator">=</span> tabHeight<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>load <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> scrollTop <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>scrollTop <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>scrollTop <span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>top <span class="token operator">&amp;&amp;</span> scrollTop <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>bottom<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>verticalNavTop <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">50</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>tabCur <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>scrollTop<span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.fixed</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalNav.nav</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200upx<span class="token punctuation">;</span>
<span class="token property">white-space</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalNav.nav .cu-item</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalNav.nav .cu-item.cur</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalNav.nav .cu-item.cur::after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 8upx<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10upx 0 0 10upx<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> currentColor<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0upx<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalBox</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.VerticalMain</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">全屏抽屉</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/plugin/drawer/" class="prev">全屏抽屉</a></span> <!----></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
@@ -37,6 +264,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.98d9df19.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/34.4aeb1a30.js" defer></script>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/34.f43470a7.js" defer></script>
</body>
</html>