Swiper 轮播

1. npm i swiper@4.3.3 -S

 1 <div class="swiper-container">
 2     <div class="swiper-wrapper">
 3         <div class="swiper-slide">Slide 1</div>
 4         <div class="swiper-slide">Slide 2</div>
 5         <div class="swiper-slide">Slide 3</div>
 6     </div>
 7     <!-- 如果需要分页器 -->
 8     <div class="swiper-pagination"></div>
 9     
10     <!-- 如果需要导航按钮 -->
11     <div class="swiper-button-prev"></div>
12     <div class="swiper-button-next"></div>
13     
14     <!-- 如果需要滚动条 -->
15     <div class="swiper-scrollbar"></div>
16 </div>

     watch: {
    PhoneHeadlist (value) { // PhoneHeadlist数组中有数据了 但界面还没有异步更新

      // 在修改数据之后立即使用它，然后等待 DOM 更新。
      this.$nextTick(() => {
        // 一旦完成界面更新, 立即执行回调
        new Swiper('.swiper-container', {
           slidesPerView : 'auto',//开启自定义样式
           observer:true,//修改swiper自己或子元素时，自动初始化swiper
           observeParents:true,//修改swiper的父元素时，自动初始化swiper
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        })
      })
    }
  

需求：横向滑动

1. scrollX:true

better-scroll

npm install --save  better-scroll

1. 结构

   <div class="wrapper">
     <ul class="content">
       <li>...</li>
       <li>...</li>
       ...
     </ul>
   </div>
   

2. 引入 import BScroll

import BScroll from 'better-scroll'

3. 实例化对象（加载时机很重要，一定要在数据加载完成后，要不没法滚动，因为数据加载完成后实例才能确定容器的高度）

new BScroll(wrapper, {})

4. 样式调整(overflow这个样式很重要，否则滑动会超出容器)

       .wrapper{
         height: 500px;
   background-color: red;
   margin-top: 100px;
   overflow:hidden;
       }
   

   echarts

    npm i echarts@5.1.2 -S
   

   1.main.js

   Vue.prototype.$echarts=require("echarts")
   

   2.导入js(这个是自己的文件，导入比较方便，不导入也可以，通过dom元素找到对应的div)

   //导入jsimport "../src/assets/lib/jquery.min.js";
   

   3.创建存放展示页面的div

    <div id="main" style="width:400px;height:500px;"></div>
   

   4.创建echarts对象(这儿使用that.$echarts，因为我们第一步就把对象挂在了全局)

       var that=this;    var mCharts = that.$echarts.init($("#main")[0])
   

   5.初始化数据

   var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据    var option = {            title: { // 标题设置        text: '柱形表', // 标题文字        textStyle: { // 标题文字样式设置          color: 'blue'        }            },                  toolbox: { // 工具箱按钮        feature: {          saveAsImage: {}, // 导出图片          dataView: {}, // 数据视图          restore: {}, // 重置          dataZoom: {}, // 区域缩放          magicType: {            type: ['bar', 'line']          } // 动态图表类型的切换        }      },      xAxis: {        type: 'value'      },      yAxis: {        type: 'category',        data: xDataArr      },      series: [        {          name: '语文',          type: 'bar',          markPoint: { // 标记点            data: [              {                type: 'max', name: '最大值'              },{                type: 'min', name: '最小值'              }            ]          },          markLine: { // 标记线            data: [              {                type: 'average', name: '平均值'              }            ]          },          label: { // 柱状图上的文字设置            show: true, // 是否显示            rotate: 60, // 旋转角度            position: 'top' // 显示位置          },          barWidth: '30%', // 柱的宽度          data: yDataArr        }      ]    }
   

   6.运行

    mCharts.setOption(option)