python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(17)---课程列表组件位置变化的问题

问题汇总

---

关于列表显示之后，在导航之前切换时候列表的位置会有变化的问题

1：问题表现

位置变化.gif

分析问题：

image.png

vux自带的swiper组件是导致位置变化主要原因。注释之后不会出现这种情况了！

注释后的表现：

GIF.gif

在频道直接的切换不会导致位置的变化了！

问题解决：使用其他的组件 如：vue-awesome-swiper

我们引入这个组件进行使用：
首先先安装好之后载进行导入

image.png

在模板的地方进行使用：

image.png

相关的data数据：

image.png 最终效果图： GIF2.gif

2：关于一个警告的的提示：

 warning  in ./src/pages/Index/Course/course.vue

(Emitted value instead of an instance of Error) <swiper-slide v-for="item in items">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

 @ ./src/pages/Index/Course/course.vue 11:0-509
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

image.png

错误代码提示

<swiper :options="swiperOption">
      <swiper-slide v-for="item in items">
        <img :src="item" class="index_img">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
    </swiper>

应该是v- for 循环需要在代码中绑定key值，如：

  <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) in items" :key="index">
        <img :src="item" class="index_img">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
    </swiper>

修改之后

image.png