vue项目问题集锦----轮播与横向滑动

解决方法:
公共模块的内容可以放在App.vue中
这时，就可以采用keep-alive结合$route.meta来实现这个功能。
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
$route.meta则可以选择让需要的页面才展示。修改App.vue，如下：

app.vue

 <div id="app">
        <div v-if="$route.meta.keepAlive">
　　　　　　<Nav/>
　　　　　　<router-view/>
        </div>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

router

  routes: [
     {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        keepAlive:true//导航栏在该页面显示
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta:{
        keepAlive:false//导航栏在该页面不予显示
      }
    },
    ]

<div class="person-wrap" ref="personWrap">
  <ul class="person-list" ref="personTab">
    <li class="person-item">1</li>
    <li class="person-item">2</li>
    <li class="person-item">3</li>
    <li class="person-item">4</li>
    <li class="person-item">5</li>
  </ul>
</div>

js

personScroll() {
      // 默认有六个li子元素，每个子元素的宽度为120px
      let width = 6 * 120;
      this.$refs.personTab.style.width = width + "px";
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.personWrap, {
            startX: 0,
            click: true,
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }

css

			.person-wrap{
				height: 1.466667rem;
				overflow: hidden;
				white-space: nowrap;
				width: 100%;
				.person-list{
					height: 1.466667rem;
					.person-item{
						width: 240px;
						height: 110px;	
						display: inline-block;

<div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide">
		      	<img src=""/>
		      </div>
		      <div class="swiper-slide">
		      	<img src=""/>
		      </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    <!-- 如果需要导航按钮 -->
		    <!-- <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div> -->
		    <!-- 如果需要滚动条 -->
		    <!-- <div class="swiper-scrollbar"></div> -->
		  </div>

js

import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper';
mounted(){
	      new Swiper ('.swiper-container', {
	        loop: true,
	        // 如果需要分页器
	        pagination: {
	        	el:'.swiper-pagination',
	        	clickable:true,//小圆点
	        },
	        // 如果需要前进后退按钮
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        // 如果需要滚动条
	        scrollbar: '.swiper-scrollbar',
	        observer:true,//动态传值，图片轮播不了，使用此属性
	        autoplay: {//自动播放
			delay: 4000,
			stopOnLastSlide: false,
			disableOnInteraction: false,
			},
	      })
	    }

动态传值时，图片轮播不了，这是因为swiper绑定的数据bannerlist初始是为空的，所以页面初始化时swiper会认为所需要的滑动个数为0（不知道这样说正确不），即便后来的请求加入数据但swiper的滑动是没有变的，所以就会出现明明有图片却不能滑动问题。
解决办法 在swiper配置中加上 observer:true, 这样就能解决不能完全正确滑动问题

observer
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。