本文共 6668 字，大约阅读时间需要 22 分钟。

【position 一定要父元素relaviteive  相邻子元素relative没用~】

==================================================

获取id  因为vue不能改变嘛各种奇奇怪怪... so  生效写法: 

太棒了真的是 

  data() {

    const self = this;

    return {

      realIndex:0,

在 swiperOptionB: { 里

 on: {

          slideChangeTransitionEnd: function () {

            //console.log(this.activeIndex);

            self.realIndex = this.realIndex;

            console.log("AAA"+this.realIndex);

          }

 

==================================================

1 遇到一个问题 

header 其他地方都好好的 只有我新做的页面  不能点击到其他的  页面顶部额背景栏不再透明 找了很久忽然灵机一动 发现果然是因为 写了div{     color：white；     overflow:hidden; } 显然 div 比import进来的header组件 优先级要高 header的设置一下子就没有用了 在这个页面上的下拉菜单就没掉了qvq。 其实呢 我本来的意图应该是叫 content 这一块里面的才居中   总之 范围搞的太大 说不准哪里就有问题了 so 不要这样 2 又遇到一个问题 有11个<li>  但是每一个的文字长度不同 需要四个四个的排列 如果全float left  那么第一行有4个 第二行只能放下1个了  因为第1 2 3 个太长 ,如果6 7 8和它一行，放不下 这样就变得非常丑， 但是如果设置相同的高度 下面的文字太短，上面间距小 下面间距大 又非常难看

这个时候我们就需要！

给第1 5 9个元素写一个clear：both 就好了（只要class多一个就好了 不用单独拎出来~） 原来的float也不用删除.很棒~   3 最近做pc界面 恍恍惚惚  隐隐约约觉得好一点的界面  就是无限缩小缩小再缩小 然后最后展示出来的效果 是竖着排成一排 能这样就可以说算ok了 差不多就是 宽度大家差不多 要对齐

至于这样怎么做出来呢

大概就是 外面div 里面的div一定要设置好宽度 即使是fixed定的 也要有一层固定好宽度的[父元素]然后再跟根据这个父元素再来。

还有就是要多喝设计沟通qvq 比如一些图的问题

我简直变成了前端设计-。-  跟设计小姐姐说  这个图少了0.5mm   所以我这边有一块黑... 这个图大小有一点差距 看上去一样 但是透明度处理有点麻烦... qvq 毕竟是real东西了  还是很开心的

 is33Website: process.env.VUE_APP_NODE_ENV2 === "33"

4 哦哦哦哦哦

https://blog.csdn.net/qq_42309685/article/details/99462596 我做了一个QAQ简单的走马灯效果【

7 多跟设计沟通qaqqqqq

6 想跟着百度前端学院学js了~

有什么更better的事情嘛qvq  (想想很好 可是没人一起学.... 这终究是两年前的一个课程 ) 而且是关闭了的  看起来没人管了的一个课程qvq

 

这个给我划掉。。。。进新的 】

5 上面的走马灯效果做不好qaq  我灵机一动(……) 发现前人装了vueawresome swiper

然后就准备做这个 去官网这里 https://3.swiper.com.cn/api/Slides_grid/2014/1217/50.html 发现 了很多功能 可以 不过 我用的是3的版本 然后在这里 https://jsfiddle.net/bL983fjt/ 进行了尝试  虽然尝试失败了 最后哪里不对没运行起来呢 原来是这里  navigation: {           nextEl: '.swiper-button-next',           prevEl: '.swiper-button-prev',         },         scrollbar:'.swiper-scrollbar',           slidesPerView : 3,          centeredSlides : true,           autoplay: {           disableOnInteration: false,           delay: 3000         }, 这些当然不能写在navigation里  而是在外面 （头是这样）  swiperOptionA: {          observer:true,//修改swiper自己或子元素时，自动初始化swiper  　　     observeParents:true,//修改swiper的父元素时，自动初始化swiper         navigation: {           nextEl: '.swiper-button-next',           prevEl: '.swiper-button-prev',         },         scrollbar:'.swiper-scrollbar',           slidesPerView : 3,          centeredSlides : true,           autoplay: {           disableOnInteration: false,           delay: 3000         },       }, 用的时候这样  <swiper ref="awesomeSwiperA" :options="swiperOptionA" @set-translate="onSetTranslate">       <!-- slides -->       <swiper-slide>111         </swiper-slide>       <swiper-slide>222       </swiper-slide>       <swiper-slide>I'm Slide 3</swiper-slide>       <swiper-slide>I'm Slide 4</swiper-slide>       <!-- Optional controls -->       <div class="swiper-button-prev" slot="button-prev"></div>       <div class="swiper-button-next" slot="button-next"></div>     </swiper>

 

=================================================================================

swiper轮播图 踩坑（vue awresome swipe）

(先说一下 父元素<div align="center">实在太好用了 想做一个  往后轮播的11个人物右滑动的轮播，不是完全轮播，每次界面里人物占到一个半     先说下我遇到的问题： 之前有个幼稚问题，是写到导航栏的花括号里面去了，已经解决qaq 1 设置进度条无效、 2 设置了宽度50vw，每次移动的距离不到50vw，那么就移动不全，每次距离不同 3 但是，只移动10次，就导致后面3个人物看不到 4 不仅看不到，也无法通过拖动拿到 5 如果设置   slidesPerView: auto, （一行能容纳下几个） 为auto， 那么导航左右按钮失效，自动播放也失效，轮播也失效。

这也太坑了吧！！！！！然鹅，很多model都是完全的一张大图轮播，这种网格形状的，比较少。

那我们研究一下。。 

然后发现。。 还是看官方的这最靠谱。下载还要充钱。。。我尼玛 直接右键查看元素。。。针对我这个例子，pc端有的，不过还是先来看看吧

https://3.swiper.com.cn/demo/index.html 发现了，用人家的07是可以的，但是，不能那么写，要swiper  里面option绑定然后套swiper，这样直接在vue模板里面的data里就可以用了，不然咱们没办法去var一个变量qaq（不，是我不会var一个变量qaq） 那么我们在人家的 模板上改吧。。 view-source:https://3.swiper.com.cn/demo/07-centered.html 我觉得关键是看他的css，很奇怪。。 看人家的css  qaq

【先试试silide居中】

7 8 9 都是进阶 从7开始吧 【滚动条 13】 滚动条：我太南了 最后搜了很久很久，发现还是swiper2 写的最清楚， 同越更新越差的东西。。。 请看这里 https://2.swiper.com.cn/usage/scrollbar/index.html 还有这里 https://2.swiper.com.cn/api/scrollbar/2015/0205/187.html csdn的在这里 https://blog.csdn.net/dwb123456123456/article/details/82701740 我的错误就像是 https://www.cnblogs.com/stephentian/p/8344258.html 这里犯过的一样

不过 最傻的还是 我发现它根本不能用 自己就在中间middle

然后跑来跑去 后来还自己看不见了 这也太傻了 发现原来是外面定义了text-align center 它也傻傻的跟着用了 自己在类名里面取消一下就可以了（太傻了吧！！）

=============【一定要这么用】 shoow me the code！ 最重要的时候到了 

这里放下代码例子qaq了

行吧，要重新改了，不过放一下 之前尚且效果可以的part

1 html
   
             
    
                 
     
                    
                    
      
111 
            
     
          
        
    
                 
     
                    
                    
      
111 
            
     
          
               
    
          
    
           
    
          
    
        
   一定要记住slot!!!! 不然2 js 只要写data里面 就enough了data() {    return {      swiperOptionB: {        pagination: '.swiper-pagination',        slidesPerView: 2,        centeredSlides: true,        paginationClickable: true,        spaceBetween: 10,        navigation: {          nextEl: ".swiper-button-next",          prevEl: ".swiper-button-prev"        },        autoplay: {          disableOnInteration: false,          delay: 2000        },        scrollbar: '.swiper-scrollbar',        scrollbar: {          el: ".swiper-scrollbar",          hide: false, //滚动条是否自动隐藏。默认：false，不会自动隐藏。          draggable: true, //该参数设置为true时允许拖动滚动条。          snapOnRelease: false, //如果设置为false，释放滚动条时slide不会自动贴合。          dragSize: 70, //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。        },      },    };  }3 css.teacher {  width: 50vw;}.teacher img {  display: inline-block;  width: 30vw;}.swiper-container {          width: 100vw;        height: 36vh;        margin: 1vw auto;}.swiper-slide {        text-align: center;        width: 80%;}.swiper-slide:nth-child(2n) {        width: 40%;}.swiper-slide:nth-child(3n) {        width: 20%;}.swiper-scrollbar{  background: #f73a39;   height:20vw;   width: 100vw;   text-align: left;}.swiper-scrollbar-drag {  width:auto;} 

======================================

然后我尝试做一个更高级的效果 1 箭头      (自定义navigation) 2 滚动条先... 3 文字隐藏  (获得焦点)

===========这个时候大概是15:30 然后我下午搞了三个小时 人很绝望  根本搞不来 根本不会做

我人傻了 本来没什么 听说获取一个activeindex就好了   swiperindex  是在  是在data里面的   你懂吧

 on: {

          slideChangeTransitionEnd: function () {

            console.log(this.swiperindex);

             this.swiperindex=this.activeIndex;

            // Vue.set(this.swiperindex,0,tmp);

             console.log(this.swiperindex);

          }

         }

然后 根本不行 因为这个改变是假的 它是假的渲染  vue不能直接更新 

要用set方法来搞

但是吧  官方都不是这么写的（可以看我上面的还不错的标准写法）

都是直接 var swiper= xxxx  但是如果export default的话   就不行 你知道吧  会报错的

vue这里就非常蛋疼 什么 ）]} 搞在一起...    我非常抓狂

这样获取不到 this也搞不到vue  新建一个object 也不行 人傻了啊  啊啊啊  我根本不知道object的格式  太蛋疼了

后面又遇到一个自定义按钮  也非常蛋疼

设置background 不行 background-image 可以了 但是图片会给压缩   别人给安装好的麻烦就在这里  你根本不知道他是什么参数 改也不能改 人真的傻了 真的蛋疼 下午的我非常想退学  css不好吗 写点js一堆坑  各种不懂...

 

最后是这样 把slot取消了

还给他设计了样式

.swiper-button-next{  position: absolute;  bottom:0;  right:30vw;  background-image: none;}.swiper-button-next img{  width:6vw;  height: 6vw;}

行吧  我真的累了

哦 不行 要给他一个father  否则位置又定位不到  这样的

.swiper-father{

  position: relative;

  width:100vw;

  height: 10vw;

}

 

<div class="swiper-father">

就这样吧 留下了学习不好的泪水  我们下期再见