vue-cli3.0+vant出现的问题总结

1、轮播图在ios9以下都不能滑动

    解决办法：

https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件引入

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

项目中的轮播图不需要自动轮播，但是点击需要查看图片大图的那种，也是可以左右滑动的，避免不了，初始下标的传递

      
        
        
          
        
        
        

      
      
      

        {{ current + 1 }} / {{ swiperLen }}
      
    

data() {
    return {
      current: 0, // 轮播图下标
      swiperLen: 0, // 轮播图的下标
      swiperItem: [], // 轮播图数据
      swiperOption: {
        loop: true,
        zoom: true,
        // initialSlide:2, // 进行初始化
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        on: {
          slideChangeTransitionEnd() {
            _this.current = this.realIndex;
          }
        }
      }
    };
  },

上面定义轮播图的初始下标是由initialSlide进行定义的，在子组件获取赋值的话会有问题，解决的办法，是在beforeMount生命周期进行赋值，这样初始化下标就会起作用了。

2、Collapse折叠面板在ios9以下，会出现转一圈，在展开。用户体验不是很好

解决办法：利用js实现点击展开效果，但是效果不太好，加过渡进行优化