swiper

  1. <van-swipe :autoplay="3000" indicator-color="white">
  2.   <van-swipe-item>1</van-swipe-item>
  3.   <van-swipe-item>2</van-swipe-item>
  4.   <van-swipe-item>3</van-swipe-item>
  5.   <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

ImagePreview 图片预览

1. 引入

ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式，使用前需要先引入它

  1. import {ImagePreview} from "vant";

2. 使用

  • 首先我们为轮播图添加点击事件

    1. <van-swipe :autoplay="3000" indicator-color="white">
    2.       <van-swipe-item  v-for="(item,i) of products" :key="i">
    3.           <img :src="item.productCover" alt="" @click="toggle(i)">
    4.       </van-swipe-item>
    5.   </van-swipe>

  • 然后我们使用ImagePreview组件实现图片预览的功能（当点击图片的时候调用），实现的方式很简单， 直接传入图片数组即可实现图片预览

    1. export default {
    2. name: "swiper",
    3. data(){
    4.     return{
    5.         img:[],
    6.         products: []
    7.     }
    8. },

  • 将图片push到img数组里面

Tip：img数组的结构
image.png

  1. mounted(){
  2.       this.axios.get("http://yapi.demo.qunar.com/mock/34614/").then(res=>{
  3.           this.products=res.data
  4.           this.products.forEach(item=>{
  5.               this.img.push(item.productCover)
  6.           })
  7.       })
  8.   },
  1. methods:{
  2.       toggle(index){
  3.           ImagePreview({
  4.               images:this.img,
  5.               startPosition:index                //图片预览起始位置索引
  6.           })
  7.       }
  8.   }