silver-horizontal-list

* 基础组件 * silver-horizontal-list是基础横向list组件 * 基于展示层和交互层的标准组件

Usage no npm install needed!

<script type="module">
  import silverHorizontalList from 'https://cdn.skypack.dev/silver-horizontal-list';
</script>

README

是什么

  • 基础组件
  • silver-horizontal-list是基础横向list组件
  • 基于展示层和交互层的标准组件

如何使用

  • 通过tnpm引入模块

    npm install silver-horizontal-list --save
    
    const HorizontalList = require('silver-horizontal-list')
    
  • 全局提供对象tvcnpt.SilverHorizontalList

  • 组件内部HTML展示

    initView(style, data) {
      let node = document.createElement('div')
      node.className = 'alitv-horizontal-list'
      node.setAttribute('data-role', 'Scroll')
      node.setAttribute('data-cfg', 'scroll_dir:h')
      return node
    }
    render(node, style, data) {
      let HTML = '<div class="atv-scroll-list horizontal-list-scroll-list">' +
        '<div class="horizontal-list-title">'+data.title+'</div>'
    
      data.list.forEach(function(item, index) {
        HTML += '<div class="horizontal-list-border" data-index='+index+' data-url='+item.url+' data-role="Widget">' +
          '<div class="horizontal-list-item"> ' +
            '<div class="horizontal-list-img-block"><img class="horizontal-list-img" src='+item.imgSrc+' /></div>' +
            '<div class="horizontal-list-bg"></div>' +
            '<div class="horizontal-list-name-bg"></div>' +
            '<div class="horizontal-list-name">' +
              '<div class="horizontal-list-name-block">' +
                '<div class="horizontal-list-name-scroll"><p class="horizontal-list-text">'+item.name+'</p></div>' +
              '</div>' +
            '</div>' +
            (data.HTML || '') +
            (item.HTML || '') +
          '</div>' +
        '</div>'
      })
    
      HTML += '</div>'
      node.innerHTML = HTML
    }
    
  • 使用实例

    new HorizontalList({
      target: DOM,
      className: '',
      data: {
        title: 'title',
        list: [
          {
            name: '第一',
            imgSrc: '',
            url: ''
          },
          {
            name: '第二',
            imgSrc: ''
            url: ''
          }
        ]
      },
      isRoll: false
      width: 500,
      height: 600,
      gap: 100,
      offsetLeft: 200,
      isTitle: false,
      offsetTop: 100,
      zIndex: 1,                    // 选传,定位z-index
      outlineColor: 'transparent',  // 选传,外边框颜色
      inlineColor: 'transparent',   // 选传,内边框颜色
      outlineColorFocus: '#fff',    // 选传,外边框focus颜色
      inlineColorFocus: 'blue',     // 选传,内边框focus颜色
      outlineWidth: 6,              // 选传,外边框宽度
      inlineWidth: 2,               // 选传,内边框宽度
      radius: 30,                   // 选传,圆角
    })