vue-awesome-swiper 相关问题

生南星

发布于 2020-04-27 11:47:24

1.3K0

发布于 2020-04-27 11:47:24

文章被收录于专栏：生南星

关于swiper:

Swiper常用于移动端网站的内容触摸滑动，它是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

项目实践之简单应用：

安装

npm install swiper vue-awesome-swiper --save

引用 ( 全局引用或组件引用 )

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper';
import '../../node_modules/swiper/css/swiper.css'
Vue.use(vueSwiper);

基本使用

<swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码

data(){
    return{
      swiperOption: {//swiper3
      autoplay: 3000,
      speed: 1000,
      pagination: {
      el: '.swiper-pagination',
          clickable: true,
       }
      }
    }
  }

注：vue-awesome-swiper 的基本配置与使用方法与 Swiper 基本一致。

vue-awesome-swiper 缩略图的使用：

<div class="memberGTop">
  <!-- 轮播缩略图 -->
  <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
      <swiper-slide class="slide-1" v-for="(item,index) in banner" :key="index">
        <div class="warpDes" :style="{backgroundImage: 'url('+(item.url)+')',backgroundSize:'100% 100%'}">
          //....
        </div>
      </swiper-slide>
  </swiper>
  <!-- swiper2 Thumbs 可随意定义-->
  <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
     <swiper-slide class="slide-2" v-for="(item,index) in banner" :key="index">
        <p>{{item.level_name}}</p>
      </swiper-slide>
   </swiper>
</div>

data(){
    return{
       banner:[],
       //轮播图相关
       swiperOptionTop: {
          spaceBetween: 10 
       },
       swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
     },
   }
},

mounted(){
   this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop
   })
},

vue-awesome-swiper 相关小问题：

vue-awesome-swiper 将当前轮播下标传到data里

data(){
    const self = this;
    return{
    realIndex：0, //当前下标
    swiperOptionTop: {
          spaceBetween: 10，
          on:{
             slideChangeTransitionEnd:function () {
                self.realIndex = this.activeIndex;
             }
          }
       },
    }
}

vue-awesome-swiper 自定义分页器

data(){
    const self = this;
    return{
    realIndex：0, //当前下标
    swiperOption: {
          loop: true,
          pagination: {
             el:'.swiper-pagination',
             clickable :true,
             renderBullet: (index, className)=> { //自定义分页器
                var text = '',divs='';
                for(var i=0;i<this.banner.length;i++){
                  if(i==index){
                    text = this.banner[i].name;
                  }
                }
             return '<div class="'+ className + '"><span>'+ text +'</span><div class="three"></div></div>'
         },
       },
    }
}

根据动态数据判断 swiper 该有多少滑动模块 ( 以八个为例)

如图所示判断数据应该分成多少页

aboutDo(){
   var result = [];
   for(var i=0,len=this.banner[this.realIndex].equity.length;i<len;i+=8){
      result.push(this.banner[this.realIndex].equity.slice(i,i+8));
   }          
   this.result = result;
   console.log(this.result);
   }
}

<swiper :options="swiperOptionTwo">
    <swiper-slide v-for="(first,i) in result" :key="i">
       <div class="user-header-nav-item" v-for="(item,index) in result[i]" :key="index">
          <router-link :to="{path:'/allPowers',query:{desClick:JSON.stringify(item)}}">
              <img class="user-header-nav-icon" :src="item.equity_url" alt="">
              <div class="user-header-nav-name">{{item.title}}</div>
           </router-link>
        </div>
    </swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination"  slot="pagination"></div>
</swiper>

今日份小知识：编程算法 - 返回所有最长无重复连续子串及其长度

例：输入aaa，返回a a a

输入abc，返回abc 输入abcad，返回bcad 输入abcabcabc，返回abc bca cab abc bca cab abc

思路： 1. 使用for从头到尾循环遍历字符串每一个字符

若当前字符没有在obj对象里，说明还没有出现重复字符： （1）将当前字符加在nowStr尾部；（2）在obj对象里添加这个字符，字符值为它的位置
若当前字符出现在obj对象里，说明出现重复字符： ‌考虑2种情况： 1. obj.start指针在重复字符的前一个字符的位置的前面或重叠（如：abcad，obj.start指针初始为0，位置跟第一个a重叠），说明当前字符与当前子串nowStr有重复：（1）更新obj.start指针的值，指向重复字符的前一个字符的位置+1（如：abcad，则obj.start的值从0变成obj[a]+1=1）；（2）将重复字符的位置更新成后一个字符的位置（如：abcad，obj[a]的值从0变成3）；（3）比较当前子串nowStr与最长子串maxStr的长度，若大于则替换，若等于则加在maxStr末尾，若小于则不管；（4）更新当前子串的值为obj.start的位置到当前字符的位置（nowStr=data.substring(obj.start,i+1)） 2. obj.start指针在重复字符的前一个字符的位置的后面（如：abccba，遍历到第二个b时，obj.start指针为3，在第一个b的后面），说明当前字符与当前子串nowStr无重复：（1）仅更新重复字符的位置为当前位置；（2）将当前字符加在nowStr末尾

2. for循环便利出来后: （1）再比较nowStr与maxStr的长度，若大于则替换，若等于则加在maxStr末尾，若小于则不管；

3‌. 输出maxStr

NoRepeatMaxStr(data){
   data = data.trim(); //去除字符串首尾空格
   let obj={
      start: 0
   };
   let nowStr='';
   let maxStr='';
   let maxLen=0;
   let len = data.length;
   for(let i=0;i<len;i++){
       let char = data[i];
       if(!(obj[char]>=0)){ // 若不重复
          obj[char]=i;
          nowStr+=char;
       }else{  // 若重复
            if(obj.start<=obj[char]){ // 若start指针在重复字符（重复字符的第一个字符）之前
                obj.start=obj[char]+1; // 改变start指针位置
                obj[char]=i; // 改变这个字符的位置
                if(nowStr.length>maxLen){ // 比较当前子串跟最长子串的长度
                  maxStr=nowStr;  // 若大于，则替换
                  maxLen=nowStr.length;
                  nowStr=data.substring(obj.start,i+1);
                }else if(nowStr.length===maxLen){ // 若等于，则隔一个空格加在末尾
                  maxStr+=' '+nowStr;
                  nowStr=data.substring(obj.start,i+1);
                }else{  // 若小于，仅更新nowStr
                  nowStr=data.substring(obj.start,i+1);
                }
         }else{ // 若start指针在重复字符（重复字符的第一个字符）之后
                obj[char]=i;  // 改变这个字符的位置
                nowStr=data.substring(obj.start,i+1);
              }
            }
         }
        if(nowStr.length>maxLen){
            maxStr=nowStr;
            maxLen=nowStr.length;
        }else if(nowStr.length===maxLen){
            maxStr+=' '+nowStr;
        }
        console.log(maxStr,maxLen)
 },

原文「编程算法 - 返回所有最长无重复连续子串（js）」：https://www.jianshu.com/p/58ce8d304800

此面试题若单单只返回所有最长无重复连续子串的长度应该有更简单的算法：

NoRepeatMaxLength(s){
    const length = s.length;
        const map = new Map();
        let i = 0,
            j = 0;
        let ans = 0;
        while (i < length && j < length) {
           // 容易理解：检查s[j]是否出现过，并且s[j]重复的字符是否在当前的滑动窗口中
           if (map.has(s[j]) && map.get(s[j]) >= i) {
             i = map.get(s[j]) + 1;
           }
          ans = Math.max(j - i + 1, ans);
          map.set(s[j], j);
          ++j;
      }
      console.log(ans);
  }

原文「剑指offer-最长不含重复字符的子字符串-JavaScript」：https://www.cnblogs.com/geyouneihan/p/12650417.html

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-04-14，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js