vue使用vue-awesome-swiper实现选中筛选条件，将筛选条件定位到左侧

超、凢脫俗 2023-01-09 01:07 180阅读 0赞

### 一、安装并引入vue-awesome-swiper ###

vue-awesome-swiper：[github地址][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 style="padding:0px 15px;" :options="swiperOptions">
          
          <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。
            spaceBetween: 10 //在slide之间设置距离（单位px）。
          }
        };
      },
      methods: {
        setRadioVal(id) {
          this.val = id;
        }
      }
    };
    </script>
    <style>
    .activeClass
      color #ff976a
      background-color #fff2ec
    .noActiveClass
      background-color #f5f5f5
    </style>

效果如下

![I9yQ7qPxTp][]  
参考资料：[Swiper api文档][Swiper api]

[github]: https://github.com/surmon-china/vue-awesome-swiper
[I9yQ7qPxTp]: /images/20221119/38200a79ce81427388f34289fb59625b.png
[Swiper api]: https://www.swiper.com.cn/api/index.html