3.28

• swiper轮播图

数据异步的情况下轮播图的展示方法：

<swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
      <!--  @click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件 -->
      <swiper-slide
        v-for="(v, i) in imgList"
        :key="i"
        @click.native="goto(v.url)"
      >
        <img :src="v.imgurl" width="100%" height="100%" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "SwiperComp",
  created: function () {
    /* 数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，
    导致配置无缝轮播的时候效果出不来 怎么办？*/
    /* 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，
    数据到了，再加载 */
    axios.get("/data/imgJson.json").then((res) => {
      this.imgList = res.data.imglist;
      /* 使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 */
      /* 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，
      担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法 */
      this.$nextTick(()=>{
        /* 在异步操作里面slideTo第一个参数表示第几张  */
        this.$refs.mySwiper.swiper.slideTo(2,1000,false)
      })
    });
  },
  methods: {
    goto: function (url) {
      /* console.log(url) */
      /* window.open会打开一个新的窗口 */
      window.open(url);
      /* location.href在当前页跳转 */
      /* location.href = url; */
    },
  },
  data() {
    return {
      imgList: [],
      swiperOptions: {
        /* 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为
        "fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）
        、"cards"(卡片式)、"creative"（创意性）。 */
        effect: 'coverflow',
        pagination: {
          el: ".swiper-pagination",
          /*  此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换 */
          clickable :true,
        },
        loop:true,
        autoplay: {
          delay: 2000,
          /* 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 */
          stopOnLastSlide: false,
          /* disableOnInteraction默认是true 需要改成false  */
          /* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
          disableOnInteraction: false,
        },
      },
    };
  },
  
  mounted() {
    
    /* console.log("Current Swiper instance object", this.$refs.mySwiper.swiper); */
    /* this.swiper.slideTo(3, 1000, true); */
   
    // console.log(this.$refs.mySwiper.swiper.slideTo(1,1000,false) )
  },
};
</script>
复制代码
复制代码

• less的安装及应用

安装：1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less
4、在main.js import less from 'less' Vue.use(less) 作用：在所有页面都可以使用less预编译css语言
5、独立的vue文件需要引入less, style lang="less"
less中变量的使用 定义方式：@key:value; 使用方式：@key; 字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)
写减法的时候左右要加空格，否则会理解为杠-多层嵌套+变量计算；

@pink: pink;
@skyblue: skyblue;
@orange: orange;
@img: "../assets/";
@k: 100px;
.test(@color:@pink,@size:14px) {
    background: @color;
    font-size: @size;
  }
  .a {
    .test();
  }
  .b {
    .test(@color:@skyblue,@size:30px);
  }

.box {
  width: 200px;
  height: 200px;
  background: url("@{img}logo.png") no-repeat;
}
h1 {
  color: @pink;
}
.box1 {
  width: @k*2;
  height: @k*2;
  background: @skyblue;

  .box2 {
    width: @k;
    height: @k;
    background: @orange;
  }
  .box3 {
    width: @k / 2;
    height: @k / 2;
    background: @pink;
  }
}

ul {
  width: @k*2;
  height: @k*2;
  background: @skyblue;

  li:nth-of-type(1) {
    width: @k - 20px;
    background: @orange;
  }
  li:nth-of-type(2) {
    width: @k + 20px;
    background: @pink;
  }
  li:nth-of-type(3) {
    width: @k + 10px;
    background: @orange;
  }