vue移动端使用swiper+vue-awesome-swiper实现滑动选择

vue使用swiper+vue-awesome-swiper实现滑动选择

  • 踩坑提示
    • 1.源文档使用原生编写,不能直接写在vue里
      • 解决方案
    • 2.兼容性问题
  • 实现

先上效果图:
vue移动端使用swiper+vue-awesome-swiper实现滑动选择_第1张图片

踩坑提示

1.源文档使用原生编写,不能直接写在vue里

swiper的文档写的太简陋了,虽然兼容vue,但是文档中给的样例是用原生html写的,把vue组件名放到样式类中了.原文档中,我要实现的功能的样例代码是这样:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../package/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    body {
   
      background: #fff;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
   
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
   
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;

    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper"

你可能感兴趣的:(css,JS,前端,vue,html)