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

一、安装并引入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 style="padding:0px 15px;" :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。
        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文档