插件的基本使用方法

1. eCharts百度统计图插件

该组件使用了百度官方插件，通过统一接口调用。所有API与官方保持一致，详情见官方文档：eCharts3官网。此处仅提供基础使用说明。

1.容器准备

eCharts图表的渲染需要一个固定像素尺寸的容器，由于框架采用了rem为单位，故需要进行单位尺寸换算才能正常工作,框架提供了VUX.utils.matrixing方法来实现rem和px单位的换算。以width:100%; height:3.2rem 的DOM节点为例：

[element].style.height = VUX.utils.matrixing(0.32) + 'px';

注：一般情况下，图表容器宽度即为可视区域宽度（VUX.clientWidth）,若需要减去对应的padding及margin，可通过换算后减去，以padding:0 0.16rem为例：

[element].style.width = VUX.clientWidth - VUX.utils.matrixing(0.16*2) + 'px';

2. 初始化并调用

var myChart = VUX.echarts.init([element]);
myChart.setOption(options);

其中options为图表的基础配置参数，官网有详细文档和案例演示，在此不作介绍。

2. scroller滑动选择插件

方法： VUX.scroller(element, data, onSelect）

实例：

// element可为一个dom对象，也可以是 '#name' 或 '.name'
var myScroller = VUX.scroller([element], {
      data: [
        {name: '金樽清酒斗十千，玉盘珍羞直万钱', value: 0},
        {name: '停杯投箸不能食，拔剑四顾心茫然', value: 1},
        {name: '欲渡黄河冰塞川，将登太行雪满山', value: 2}
      ],
      onSelect: function(data){
        VUX.toast({
          text: '你选择了第'+ (data*1 + 1) + '行诗句'
        })
      }
    })

参数说明：

注：该插件调用后请调用 myScroller.destroy()销毁当前实例。

3. datePicker日期时间选择插件

调用： var myPickdate = VUX.datePicker(options)

显示实例化对象： myPickdate.show()

实例：

var myPickdate = VUX.datePicker({
      trigger: els.pickdate,
      format: 'YYYY-MM-DD',
      minYear: 2000,
      maxYear: 2020,
      onConfirm: function (value){
        VUX.toast({
          type: 'success',
          text: '您选择的时间为：'+ value
        })
      }
    })

参数说明：

注：该插件调用后请调用 myPickdate.destroy()销毁当前实例。

4. popPicker级联弹框滑动选择插件

注：该方法最多支持三级级联，最少支持一级，通过判断传入参数二维数组长度确定级联层数，如 [[数组1]，[数组2]]为一个二级级联， [[数组1]，[数组2],[数组3]]则为一个三级级联

调用： var myPopPicker = VUX.popPicker(options)

显示实例化对象： myPopPicker.show()

参数说明：

5. swiper滑动轮播图插件

调用： var mySwiper = VUX.swiper(options)

实例：

VUX.swiper({
      container: [element],
      item: '.item',
      ratio: 960/445,
      observer: true,
      autoplay: true,
      onSwiped: function(i){
        console.log('当前轮播图索引值为：' + i);
      },
      during: 3000
    });

参数说明：

HTML结构：

<div class="swiper-wrap">
    <div class="swiper" v-el:slider1>
        <div class="item">
            <你的html片段>
            如： <div class="item"><img src="../../assets/img/v4.jpg"></div> 
        </div>
    </div>
</div>

6. scrollLoad滚动加载插件

调用： var myScroller = VUX.scrollLoad(options)

刷新容器： myScroller.refresh()

结束滚动加载触发： myScroller.done()

实例1：

var myScrollLoad = VUX.scrollLoad({
      fullScreen: true, 
      threshold: 100,
      scroller: '#scroller', 
      callback: function(){
        // do something
      }
    })

实例2：

var myScrollLoad = VUX.scrollLoad({
      fullScreen: false, 
      container: '#container',
      threshold: 100,
      scroller: '#scroller', 
      callback: function(){
        // do something
      }
    })

注： 全屏滚动不指定滚动容器，仅需指定滚动主体即可。每次滚动后加载结束或者页面长度发生变化时，需调用myScroller.refresh()刷新容器，重新获取滚动主体高度。

参数说明：