技術標籤：● 前端Swipervue

一、安裝並引入vue-awesome-swiper

vue-awesome-swiper：github地址

• 安裝

在專案目錄終端執行

npm install swiper vue-awesome-swiper --save

安裝版本

"swiper": "^6.4.5",

"vue-awesome-swiper": "^4.1.1",

• 在Vue中引入

在main.js檔案中全域性註冊

import VueAwesomeSwiper from "vue-awesome-swiper"
 
;

// import style (>= Swiper 6.x)

import "swiper/swiper-bundle.css";

Vue.use(VueAwesomeSwiper);

二、實現點選篩選條件，條件定位到左側效果

<template>
  <div>
    <swiper :options="swiperOptions">
      <!-- 設定swiper-slide適應內容 -->
      <swiper-slide
        style="width:auto"
        v-for="radio in radioList"
        :key="radio.id"
      >
        <div
          style="display:inline-block;height:20px;line-height:20px;border-radius:10%;text-align:center;padding: 5px 10px"
          :class="{
            activeClass: radio.id == val,
            noActiveClass: radio.id != val
          }"
          @click="setRadioVal(radio.id)"
        >
          {{ radio.text }}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "RadioButton",
  data() {
    return {
      val: null,
      radioList: [
        { id: 0, text: "條件0" },
        { id: 1, text: "條件1" },
        { id: 2, text: "條件2" },
        { id: 3, text: "長長條件3" },
        { id: 4, text: "條件4" },
        { id: 5, text: "條件5" },
        { id: 6, text: "長條件6" },
        { id: 7, text: "條件7" },
        { id: 8, text: "長長條件8" },
        { id: 9, text: "條件9" },
        { id: 10, text: "條件10" }
      ],
      //Swiper的配置引數
      swiperOptions: {
        slidesPerView: "auto", //設定slider容器能夠同時顯示的slides數量,'auto'則自動根據slides的寬度來設定數量。
        slideToClickedSlide: true, //設定為true則點選slide會過渡到這個slide。
        slidesOffsetBefore: 15, //設定slide與左邊框的預設偏移量（單位px）。
        slidesOffsetAfter: 15, //設定slide與右邊框的預設偏移量（單位px）。
        spaceBetween: 10 //在slide之間設定距離（單位px）。
      }
    };
  },
  methods: {
    setRadioVal(id) {
      this.val = id;
    }
  }
};
</script>
<style>
.activeClass
  color #ff976a
  background-color #fff2ec
.noActiveClass
  background-color #f5f5f5
</style>

 

效果如下

參考資料：Swiper api文件