@ctmobile/ui-cascadecompared-sd

    1.0.2 • Public • Published

    CascadeCompared

    基本布局

    常见的布局如下:

    
    
    • ct-cascadecompared和ct-stickuplayout - 代表是一个cascadecompared组件
      • ct-cascadecompared-indicator - 代表指示器
        • ct-cascadecompared-fixedWrap - 代表固定的部分
          • ct-cascadecompared-item - 代表固定部分的外层 这个元素始终只有一个
            • ct-cascadecompared-cell - 代表固定部分的里层
        • ct-cascadecompared-autoWrap - 代表可以滚动的部分
          • ct-cascadecompared-cell - 代表可滚动的单元格 元素个数同列数相同
      • ct-cascadecompared-master - 代表主体部分
        • ct-cascadecompared-master-inner - 代表主体内的部分
          • ct-stickuplayout-fixed - 固定的列头
          • ct-stickuplayout-inner - 主体部分
            • ct-stickuplayout-item - 一行
              • ct-stickuplayout-item-header - 一行的头
              • ct-stickuplayout-item-content - 一行的内容部分
                • ct-cascadecompared-fixedWrap - 代表固定的部分
                  • ct-cascadecompared-item - 代表固定部分的外层 个数等于行数
                    • ct-cascadecompared-cell - 代表固定部分的里层
                • ct-cascadecompared-autoWrap - 代表可以滚动的部分外层
                  • ct-cascadecompared-autoInner - 代表可滚动的部分内层
                    • ct-cascadecompared-item - 代表固定部分的外层 个数等于行数
                      • ct-cascadecompared-cell - 代表固定部分的里层 个数等于列数

    初始化

    
      import CascadeCompared from '@ctmobile/ui-cascadecompared';
      import '@ctmobile/ui-cascadecompared/cascadecompared.less';
      const cascadecompared = CascadeCompared.create(el,config = {columnsWidth = [], rowsHeight = []});
    
    

    配置项

    参数 类型 描述
    columnsWidth array 列的宽度,例如[50,80,90,....],如果想跳过,可以写成null,undefined,'',跳过的宽度默认为6rem
    rowsHeight array 行的高度,例如[50,80,90,....],如果想跳过,可以写成null,undefined,'',跳过的宽度默认为3rem

    例子

    html

    
            <!--基本的-->
            <dl>
                <dt>
                  <h3 class="title">基本的</h3>
                </dt>
                <dd>
                  <div class="ct-stickuplayout ct-cascadecompared" id="cascadecompared-demo-base">
                    <div class="ct-cascadecompared-indicator">
    
                      <div class="ct-cascadecompared-autoWrap">
                        <div class="ct-cascadecompared-item">
                          <span class="ct-cascadecompared-cell">指标</span>
                          <span class="ct-cascadecompared-cell">比较1</span>
                          <span class="ct-cascadecompared-cell">比较2</span>
                          <span class="ct-cascadecompared-cell">比较3</span>
                          <span class="ct-cascadecompared-cell">比较4</span>
                          <span class="ct-cascadecompared-cell">比较5</span>
                          <span class="ct-cascadecompared-cell">比较6</span>
                          <span class="ct-cascadecompared-cell">比较7</span>
                          <span class="ct-cascadecompared-cell">比较8</span>
                          <span class="ct-cascadecompared-cell">比较9</span>
                        </div>
                      </div>
                    </div>
    
                  </div>
                </dd>
              </dl>
    
            <!--动态插入和删除-->
            <dl>
                <dt>
                  <h3 class="title">动态插入和删除</h3>
                  <div class="toolbar">
                    <button id="cascadecompared-demo-dynamic-append">插入</button>
                  </div>
                </dt>
                <dd>
                  <div class="ct-stickuplayout ct-cascadecompared" id="cascadecompared-demo-dynamic">
                    <div class="ct-cascadecompared-indicator">
    
                      <div class="ct-cascadecompared-autoWrap">
                        <div class="ct-cascadecompared-item">
                          <span class="ct-cascadecompared-cell">指标</span>
                          <span class="ct-cascadecompared-cell">比较1</span>
                          <span class="ct-cascadecompared-cell">比较2</span>
                          <span class="ct-cascadecompared-cell">比较3</span>
                          <span class="ct-cascadecompared-cell">比较4</span>
                          <span class="ct-cascadecompared-cell">比较5</span>
                          <span class="ct-cascadecompared-cell">比较6</span>
                          <span class="ct-cascadecompared-cell">比较7</span>
                          <span class="ct-cascadecompared-cell">比较8</span>
                          <span class="ct-cascadecompared-cell">比较9</span>
                        </div>
                      </div>
                    </div>
    
                  </div>
                </dd>
              </dl>
    
            <!--滚动到指定位置(通过索引)-->
            <dl>
                <dt>
                  <h3 class="title">滚动到指定位置(通过索引)</h3>
                  <div class="toolbar">
                    <div class="toolbar">
                      <button id="cascadecompared-demo-scrollbyindex-noanimation-btn">滚动到最后一行(无动画)</button>
                      <button id="cascadecompared-demo-scrollbyindex-animation-btn">滚动到最后一行(有动画)</button>
                      <button id="cascadecompared-demo-scrollbyindex-top-btn">回到顶部</button>
                    </div>
                  </div>
                </dt>
                <dd>
                  <div class="ct-stickuplayout ct-cascadecompared" id="cascadecompared-demo-scrollbyindex">
                    <div class="ct-cascadecompared-indicator">
    
                      <div class="ct-cascadecompared-autoWrap">
                        <div class="ct-cascadecompared-item">
                          <span class="ct-cascadecompared-cell">指标</span>
                          <span class="ct-cascadecompared-cell">比较1</span>
                          <span class="ct-cascadecompared-cell">比较2</span>
                          <span class="ct-cascadecompared-cell">比较3</span>
                          <span class="ct-cascadecompared-cell">比较4</span>
                          <span class="ct-cascadecompared-cell">比较5</span>
                          <span class="ct-cascadecompared-cell">比较6</span>
                          <span class="ct-cascadecompared-cell">比较7</span>
                          <span class="ct-cascadecompared-cell">比较8</span>
                          <span class="ct-cascadecompared-cell">比较9</span>
                        </div>
                      </div>
                    </div>
    
                  </div>
                </dd>
              </dl>
    
            <!--滚动到指定位置(通过dom)-->
            <dl>
                <dt>
                  <h3 class="title">滚动到指定位置(通过Dom)</h3>
                  <div class="toolbar">
                    <div class="toolbar">
                      <button id="cascadecompared-demo-scrollbyel-noanimation-btn">滚动到最后一行(无动画)</button>
                      <button id="cascadecompared-demo-scrollbyel-animation-btn">滚动到最后一行(有动画)</button>
                      <button id="cascadecompared-demo-scrollbyel-top-btn">回到顶部</button>
                    </div>
                  </div>
                </dt>
                <dd>
                  <div class="ct-stickuplayout ct-cascadecompared" id="cascadecompared-demo-scrollbyel">
                    <div class="ct-cascadecompared-indicator">
    
                      <div class="ct-cascadecompared-autoWrap">
                        <div class="ct-cascadecompared-item">
                          <span class="ct-cascadecompared-cell">指标</span>
                          <span class="ct-cascadecompared-cell">比较1</span>
                          <span class="ct-cascadecompared-cell">比较2</span>
                          <span class="ct-cascadecompared-cell">比较3</span>
                          <span class="ct-cascadecompared-cell">比较4</span>
                          <span class="ct-cascadecompared-cell">比较5</span>
                          <span class="ct-cascadecompared-cell">比较6</span>
                          <span class="ct-cascadecompared-cell">比较7</span>
                          <span class="ct-cascadecompared-cell">比较8</span>
                          <span class="ct-cascadecompared-cell">比较9</span>
                        </div>
                      </div>
                    </div>
    
                  </div>
                </dd>
              </dl>
    
    

    js

    
            <!--例子的js-->
            import $ from 'jquery';
            import CascadeCompared from '@ctmobile/ui-cascadecompared';
            import '@ctmobile/ui-cascadecompared/cascadecompared.less';
    
            let dynamicIndex = 0;
    
            function getDynamicTemplate(title) {
              return (
                <pre>
                <code class="html">
                `<li class="ct-stickuplayout-item">
                  <div class="ct-stickuplayout-item-header"><span class="title">${title}</span></div>
                  <div class="ct-stickuplayout-item-content">
                  <div class="ct-cascadecompared-fixedWrap">
                    <div class="ct-cascadecompared-item">
                      <span class="ct-cascadecompared-cell">厂家指导价</span>
                    </div>
                    <div class="ct-cascadecompared-item">
                      <span class="ct-cascadecompared-cell">厂家指导价</span>
                    </div>
                    <div class="ct-cascadecompared-item">
                      <span class="ct-cascadecompared-cell">厂家指导价</span>
                    </div>
                  </div>
                  <div class="ct-cascadecompared-autoWrap">
                    <div class="ct-cascadecompared-autoInner">
                      <div class="ct-cascadecompared-item">
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                      </div>
                      <div class="ct-cascadecompared-item">
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                      </div>
                      <div class="ct-cascadecompared-item">
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                        <span class="ct-cascadecompared-cell">厂家指导价</span>
                      </div>
                    </div>
                  </div>
                 </div>
                 </li>`
                </code>
                </pre>
              );
            }
    
            function initListView(el) {
              let str = '';
              for(let i = 0; i < 10; i++) {
                str += getDynamicTemplate(`header${i + 1}`);
              }
    
              $(el).append(str);
            }
    
            // 基本的
            initListView($('#cascadecompared-demo-base .ct-stickuplayout-inner')[0]);
            CascadeCompared.create($('#cascadecompared-demo-base')[0]);
    
            // 动态的插入
            initListView($('#cascadecompared-demo-dynamic .ct-stickuplayout-inner')[0]);
            const cascadeComparedDynamic = CascadeCompared.create($('#cascadecompared-demo-dynamic')[0]);
            $('#cascadecompared-demo-dynamic-append').on('click', () => {
              const $dynamicItemJO = $(getDynamicTemplate(`动态增加${++dynamicIndex}`));
              $('#cascadecompared-demo-dynamic .ct-stickuplayout-inner').append($dynamicItemJO);
              cascadeComparedDynamic.refresh();
              cascadeComparedDynamic.scrollToByHeaderEl($dynamicItemJO.prev().find('.ct-stickuplayout-item-header')[0]);
            });
    
            // 滚动到指定位置(通过索引)
            initListView($('#cascadecompared-demo-scrollbyindex .ct-stickuplayout-inner')[0]);
            const cascadeComparedScrollbyindex = CascadeCompared.create($('#cascadecompared-demo-scrollbyindex')[0]);
            const $cascadeComparedScrollbyIndexItemJO = $('#cascadecompared-demo-scrollbyindex .ct-stickuplayout-inner .ct-stickuplayout-item');
            $('#cascadecompared-demo-scrollbyindex-noanimation-btn').on('click', () => {
              cascadeComparedScrollbyindex.scrollToByIndex($cascadeComparedScrollbyIndexItemJO.length - 2, 0);
            });
            $('#cascadecompared-demo-scrollbyindex-animation-btn').on('click', () => {
              cascadeComparedScrollbyindex.scrollToByIndex($cascadeComparedScrollbyIndexItemJO.length - 2, 600);
            });
            $('#cascadecompared-demo-scrollbyindex-top-btn').on('click', () => {
              cascadeComparedScrollbyindex.scrollToByIndex(0);
            });
    
            // 滚动到指定位置(通过dom)
            initListView($('#cascadecompared-demo-scrollbyel .ct-stickuplayout-inner')[0]);
            const cascadeComparedScrollbyel = CascadeCompared.create($('#cascadecompared-demo-scrollbyel')[0]);
            const $cascadeComparedScrollbyelItemJO = $('#cascadecompared-demo-scrollbyel .ct-stickuplayout-inner .ct-stickuplayout-item');
            $('#cascadecompared-demo-scrollbyel-noanimation-btn').on('click', () => {
              cascadeComparedScrollbyel.scrollToByHeaderEl($cascadeComparedScrollbyelItemJO[$cascadeComparedScrollbyelItemJO.length - 2].querySelector('.ct-stickuplayout-item-header'), 0);
            });
            $('#cascadecompared-demo-scrollbyel-animation-btn').on('click', () => {
              cascadeComparedScrollbyel.scrollToByHeaderEl($cascadeComparedScrollbyelItemJO[$cascadeComparedScrollbyelItemJO.length - 2].querySelector('.ct-stickuplayout-item-header'), 600);
            });
            $('#cascadecompared-demo-scrollbyel-top-btn').on('click', () => {
              cascadeComparedScrollbyel.scrollToByHeaderEl($cascadeComparedScrollbyelItemJO[0].querySelector('.ct-stickuplayout-item-header'));
            });
    
    

    方法

    scrollToByIndex(index,duration) - 通过索引滚动到某一项

    • index-number 要滚动到目标的索引
    • duration-number 滚动持续的时间(默认是300毫秒)

    scrollToByHeaderEl(headerEl,duration) - 通过dom滚动到某一项

    • headerEl-HtmlElement 要滚动到的dom(带有ct-cascadecompared-item-header样式的元素)
    • duration-number 滚动持续的时间(默认是300毫秒)

    refresh() - 刷新整个StickupLayout

    on(type, handler) - 注册事件

    • type-string 注册事件的类型,包括[change]
    • handler-Function 注册事件的回调函数

    事件

    名称 说明
    change 滚动切换时触发
    scrollEnd 列滚动完成之后触发
    
      <!--事件例子代码-->
      import $ from 'jquery';
      import CascadeCompared from '@ctmobile/ui-cascadecompared';
      import '@ctmobile/ui-cascadecompared/cascadecompared.less';
    
      // 基本的
      const cascadeCompared = CascadeCompared.create($('#cascadecompared-demo-base')[0]);
      cascadeCompared.on('change', (dom, index) => {
        console.log(dom);
        console.log(index);
      });
      cascadeCompared.on('scrollend', () => {
        console.log('scrollend');
      });
    
    

    Install

    npm i @ctmobile/ui-cascadecompared-sd

    DownloadsWeekly Downloads

    11

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    43.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar