是什么

• 基础组件
• 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,                   // 选传，圆角
  })