fm453/smartchart
1
0
Fork 0
mirror of https://gitee.com/smartchart/smartchart synced 2025-05-05 09:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity
smartchart/docs/docs/3.图形开发/特殊图形/无缝滚动/index.html
JohnYan 63a66d68d9 v6.5.6
2023-05-19 16:30:25 +08:00

1824 lines
46 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="通用滚动 # 例如你的html如下
&lt;div id=&#34;smtid&#34; style=&#34;height:100%&#34;&gt; &lt;ul&gt; &lt;li&gt;smartchart&lt;/li&gt; &lt;li&gt;bigdata&lt;/li&gt; &lt;li&gt;echarts&lt;/li&gt; &lt;li&gt;make it great&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; 你只需要在图形中使用以下函数, 即可实现在无缝滚动
//smtid是滚动容器的ID ds_liMarquee(&#39;#smtid&#39;) //如果 class=&#34;smtclass&#34;, 那么也可以使用类选择器 ds_liMarquee(&#39;.smtclass&#39;) 我们也可以使用更多的配置方法
marconfig={ playtime: 3000, //滚动3秒 pausetime: 3000, //停3秒 config:{ direction: &#39;up&#39;,//向上滚动 runshort: false,//内容不足时不滚动 scrollamount: 20//速度 } } //传入自定义配置 ds_liMarquee(&#39;#smtid&#39;, marconfig) 更多config说明:
名称 类型 默认值 说明 direction 字符串 left 滚动方向，可选 left / right / up / down loop 整数 -1 循环次数，-1 为无限循环 scrolldelay 整数 0 每次重复之前的延迟 scrollamount 整数 50 滚动速度，越大越快 circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样 drag 布尔值 true 鼠标可拖动 runshort 布尔值 true 内容不足是否滚动 hoverstop 布尔值 true 鼠标悬停暂停 xml 布尔值 false 加载xml 文件 inverthover 布尔值 false 反向，即默认不滚动，鼠标悬停滚动 内置滚动表格 # smartchart内置了滚动表格, 可以一键生成">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="通用滚动 # 例如你的html如下
&lt;div id=&#34;smtid&#34; style=&#34;height:100%&#34;&gt; &lt;ul&gt; &lt;li&gt;smartchart&lt;/li&gt; &lt;li&gt;bigdata&lt;/li&gt; &lt;li&gt;echarts&lt;/li&gt; &lt;li&gt;make it great&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; 你只需要在图形中使用以下函数, 即可实现在无缝滚动
//smtid是滚动容器的ID ds_liMarquee(&#39;#smtid&#39;) //如果 class=&#34;smtclass&#34;, 那么也可以使用类选择器 ds_liMarquee(&#39;.smtclass&#39;) 我们也可以使用更多的配置方法
marconfig={ playtime: 3000, //滚动3秒 pausetime: 3000, //停3秒 config:{ direction: &#39;up&#39;,//向上滚动 runshort: false,//内容不足时不滚动 scrollamount: 20//速度 } } //传入自定义配置 ds_liMarquee(&#39;#smtid&#39;, marconfig) 更多config说明:
名称 类型 默认值 说明 direction 字符串 left 滚动方向，可选 left / right / up / down loop 整数 -1 循环次数，-1 为无限循环 scrolldelay 整数 0 每次重复之前的延迟 scrollamount 整数 50 滚动速度，越大越快 circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样 drag 布尔值 true 鼠标可拖动 runshort 布尔值 true 内容不足是否滚动 hoverstop 布尔值 true 鼠标悬停暂停 xml 布尔值 false 加载xml 文件 inverthover 布尔值 false 反向，即默认不滚动，鼠标悬停滚动 内置滚动表格 # smartchart内置了滚动表格, 可以一键生成" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" /><meta property="article:section" content="docs" />
<title>无缝滚动 | Smartchart开发手册</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.434a94c76588af150f3f16ff95526eef6dd460dea036ab853a48f798f59f3c57.js" integrity="sha256-Q0qUx2WIrxUPPxb/lVJu723UYN6gNquFOkj3mPWfPFc=" crossorigin="anonymous"></script>
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Smartchart开发手册</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul>
<li>
<a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
</li>
<li>
<a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
</li>
<li>
<input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle" />
<label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
<a role="button" class="">1.基础操作</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
</li>
<li>
<input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle" />
<label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
<a role="button" class="">Vue相关</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle" />
<label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
<a role="button" class="">不太重要</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle" />
<label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
<a role="button" class="">2.数据集说明</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
</li>
<li>
<input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle" />
<label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
<a role="button" class="">特殊数据源</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">邮件发送数据源</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle" />
<label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
<a role="button" class="">数据集形态</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle" checked />
<label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
<a role="button" class="">3.图形开发</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="">Echarts组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
</li>
<li>
<input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle" />
<label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
<a role="button" class="">函数方法</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle" checked />
<label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
<a role="button" class="">特殊图形</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="active">无缝滚动</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle" />
<label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
<a role="button" class="">Element Ui组件</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle" />
<label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
<a role="button" class="">4.布局说明</a>
</label>
<ul>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="">布局指引</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle" />
<label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
<a role="button" class="">5.参数及联动钻取</a>
</label>
<ul>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="">图形联动钻取</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle" />
<label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
<a role="button" class="">6.进阶开发 Pro</a>
</label>
<ul>
<li>
<input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle" />
<label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
<a role="button" class="">低代码开发</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="">样式快速上手</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle" />
<label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
<a role="button" class="">数据服务</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1%E8%AE%BE%E5%AE%9A/" class="">数据服务设定</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
</li>
</ul>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%AE%9E%E6%88%98%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">实战大屏模板转化</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E9%9B%86%E6%88%90AI%E7%94%9F%E6%88%90/" class="">集成 Ai生成</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle" />
<label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
<a role="button" class="">7.报表嵌入</a>
</label>
<ul>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle" />
<label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
<a role="button" class="">8. Django应用</a>
</label>
<ul>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
</li>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle" />
<label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
<a role="button" class="">9. Jupyter应用</a>
</label>
<ul>
<li>
<a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle" />
<label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
<a role="button" class="">10.其它</a>
</label>
<ul>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
</li>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://www.smartchart.cn/" target="_blank" rel="noopener">
官网
</a>
</li>
<li>
<a href="https://gitee.com/smartchart/smartchart" target="_blank" rel="noopener">
Gitee
</a>
</li>
</ul>
</nav>
<script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>无缝滚动</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#通用滚动">通用滚动</a></li>
<li><a href="#内置滚动表格">内置滚动表格</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h3 id="通用滚动">
通用滚动
<a class="anchor" href="#%e9%80%9a%e7%94%a8%e6%bb%9a%e5%8a%a8">#</a>
</h3>
<p>例如你的html如下</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;smtid&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;height:100%&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">ul</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;smartchart&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;bigdata&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;echarts&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;make it great&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span></code></pre></div><p>你只需要在图形中使用以下函数, 即可实现在无缝滚动</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//smtid是滚动容器的ID
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">ds_liMarquee</span>(<span style="color:#e6db74">&#39;#smtid&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#75715e">//如果 class=&#34;smtclass&#34;, 那么也可以使用类选择器
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">ds_liMarquee</span>(<span style="color:#e6db74">&#39;.smtclass&#39;</span>)
</span></span></code></pre></div><p>我们也可以使用更多的配置方法</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span> <span style="color:#a6e22e">marconfig</span><span style="color:#f92672">=</span>{
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">playtime</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3000</span>, <span style="color:#75715e">//滚动3秒
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">pausetime</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3000</span>, <span style="color:#75715e">//停3秒
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">config</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">direction</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;up&#39;</span>,<span style="color:#75715e">//向上滚动
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">runshort</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,<span style="color:#75715e">//内容不足时不滚动
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">scrollamount</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">20</span><span style="color:#75715e">//速度
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span><span style="color:#75715e">//传入自定义配置
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">ds_liMarquee</span>(<span style="color:#e6db74">&#39;#smtid&#39;</span>, <span style="color:#a6e22e">marconfig</span>)
</span></span></code></pre></div><p>更多config说明:</p>
<table>
<thead>
<tr>
<th style="text-align:left">名称</th>
<th style="text-align:center">类型</th>
<th style="text-align:center">默认值</th>
<th style="text-align:center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">direction</td>
<td style="text-align:center">字符串</td>
<td style="text-align:center">left</td>
<td style="text-align:center">滚动方向，可选 left / right / up / down</td>
</tr>
<tr>
<td style="text-align:left">loop</td>
<td style="text-align:center">整数</td>
<td style="text-align:center">-1</td>
<td style="text-align:center">循环次数，-1 为无限循环</td>
</tr>
<tr>
<td style="text-align:left">scrolldelay</td>
<td style="text-align:center">整数</td>
<td style="text-align:center">0</td>
<td style="text-align:center">每次重复之前的延迟</td>
</tr>
<tr>
<td style="text-align:left">scrollamount</td>
<td style="text-align:center">整数</td>
<td style="text-align:center">50</td>
<td style="text-align:center">滚动速度，越大越快</td>
</tr>
<tr>
<td style="text-align:left">circular</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">true</td>
<td style="text-align:center">无缝滚动，如果为 false，则和 marquee 效果一样</td>
</tr>
<tr>
<td style="text-align:left">drag</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">true</td>
<td style="text-align:center">鼠标可拖动</td>
</tr>
<tr>
<td style="text-align:left">runshort</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">true</td>
<td style="text-align:center">内容不足是否滚动</td>
</tr>
<tr>
<td style="text-align:left">hoverstop</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">true</td>
<td style="text-align:center">鼠标悬停暂停</td>
</tr>
<tr>
<td style="text-align:left">xml</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">false</td>
<td style="text-align:center">加载xml 文件</td>
</tr>
<tr>
<td style="text-align:left">inverthover</td>
<td style="text-align:center">布尔值</td>
<td style="text-align:center">false</td>
<td style="text-align:center">反向，即默认不滚动，鼠标悬停滚动</td>
</tr>
</tbody>
</table>
<h3 id="内置滚动表格">
内置滚动表格
<a class="anchor" href="#%e5%86%85%e7%bd%ae%e6%bb%9a%e5%8a%a8%e8%a1%a8%e6%a0%bc">#</a>
</h3>
<p>smartchart内置了滚动表格, 可以一键生成</p>
<h4 id="样式自定义">
样式自定义
<a class="anchor" href="#%e6%a0%b7%e5%bc%8f%e8%87%aa%e5%ae%9a%e4%b9%89">#</a>
</h4>
<p>如需修改表格的样式, 如字体,颜色等, 可以在模板中重定义样式
具体样式写法, 参考
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/">样式快速入门</a></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*表头样式*/</span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">smtlisthead</span>{
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#fff2cc</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">smtlisthead</span> <span style="color:#f92672">span</span>{
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*表格本体样式*/</span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">smtlistnav</span>{
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: calc(<span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">rem</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">overflow</span>: <span style="color:#66d9ef">auto</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">smtlistnav</span> <span style="color:#f92672">li</span> <span style="color:#f92672">span</span>{
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*修改奇数行背景,偶数行将odd改为even*/</span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">smtlistnav</span> <span style="color:#f92672">ul</span> <span style="color:#f92672">li</span>:<span style="color:#a6e22e">nth-child</span><span style="color:#f92672">(</span><span style="color:#f92672">odd</span><span style="color:#f92672">)</span>{ <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">100</span>,<span style="color:#ae81ff">100</span>,<span style="color:#ae81ff">100</span>,<span style="color:#ae81ff">.1</span>);}
</span></span></code></pre></div><h4 id="指定某单元格宽度对齐">
指定某单元格宽度对齐
<a class="anchor" href="#%e6%8c%87%e5%ae%9a%e6%9f%90%e5%8d%95%e5%85%83%e6%a0%bc%e5%ae%bd%e5%ba%a6%e5%af%b9%e9%bd%90">#</a>
</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;width:32rem;height:100%;flex-shrink:0;justify-content:left&#34;</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">span</span>&gt;
</span></span></code></pre></div><h4 id="单元格点击响应">
单元格点击响应
<a class="anchor" href="#%e5%8d%95%e5%85%83%e6%a0%bc%e7%82%b9%e5%87%bb%e5%93%8d%e5%ba%94">#</a>
</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">lastClickDom</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">lastDomColor</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#smtlist__name__, li&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">params</span>){
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">try</span>{<span style="color:#a6e22e">lastClickDom</span>.<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;background&#39;</span>, <span style="color:#a6e22e">lastDomColor</span>)}<span style="color:#66d9ef">catch</span>{}
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastDomColor</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;background&#39;</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;background&#39;</span>, <span style="color:#e6db74">&#39;yellow&#39;</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastClickDom</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">myparam</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">children</span>(<span style="color:#e6db74">&#39;span&#39;</span>).<span style="color:#a6e22e">eq</span>(<span style="color:#ae81ff">0</span>).<span style="color:#a6e22e">text</span>(); <span style="color:#75715e">//获取点击的参数
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#75715e">//以下加入你的action
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></div></article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<div>
<a class="flex align-center" href="https://gitee.com/smartchart/smartchartDoc/edit/master/content/docs/3.%e5%9b%be%e5%bd%a2%e5%bc%80%e5%8f%91/%e7%89%b9%e6%ae%8a%e5%9b%be%e5%bd%a2/%e6%97%a0%e7%bc%9d%e6%bb%9a%e5%8a%a8.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#通用滚动">通用滚动</a></li>
<li><a href="#内置滚动表格">内置滚动表格</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink