app vue 真机运行_Vue.js轮播库热门精选

<div style="font-size:16px;">
<div class="pgc-img">
  <img alt="c760935f002ef0ec30ccb8e01dce30bf.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-98bf4b91811de795c4fac38a760eab7c.png">
</div>
<p class="pgc-end-literature">作者：John Au-Yeung</p>
<p class="pgc-end-literature">转发链接：https://blog.logrocket.com/top-picks-vue-js-carousel-libraries/</p>
<p class="pgc-end-literature">译者：Echa攻城狮</p>
<h1 class="pgc-h-arrow-right">前言</h1>
<p>要创建一个轮播图，我们必须动态地创建显示图片，并添加导航按钮来在它们之间导航，我们可能还需要自动播放功能。</p>
<p>这些都需要时间来构建，而且极有可能我们可以更好地利用这些时间做其他事情。在这篇文章中，我们将看看Vue.js的一些轮播图库，让我们的生活变得更轻松，并让我们拿回一些宝贵的时间。</p>
<h1 class="pgc-h-arrow-right">vue-easy-slider</h1>
<p>地址：https://github.com/shhdgit/vue-easy-slider</p>
<p><strong>vue-easy-slider[1]</strong> 是一个简单的Vue滑块组件，可与鼠标和触摸屏一起使用。它是可自定义的，并带有动画效果。</p>
<p>要使用它，我们通过运行以下命令进行安装：</p>
<pre class="blockcode"><code>npm i -S vue-easy-slider</code></pre>
<p>然后我们可以通过编写以下代码来使用它：</p>
<pre class="blockcode"><code>//main.jsimport Vue from "vue";import App from "./App.vue";import EasySlider from "vue-easy-slider";Vue.use(EasySlider);Vue.config.productionTip = false;new Vue({  render: h => h(App)}).$mount("#app");</code></pre>
<pre class="blockcode"><code>//App.vue</code></pre>
<div id="app">
  <code> <img alt="" src=""></code>
</div>
<code></code>
<p>我们使用 slider 组件来添加轮播，animation 属性设置动画效果。顾名思义，slider-item 存放的是轮播项目。</p>
<p>我们还可以更改样式。例如，我们可以通过编写以下内容来更改宽度和高度：</p>
<pre class="blockcode"><code></code></pre>
<div>
  <code> <img alt="" src=""></code>
</div>
<code></code>
<p>我们还可以启用或禁用触摸控制并更改幻灯片切换的速度。它还会发出一些事件，例如 change，在切换幻灯片时会触发。当显示下一张或上一张幻灯片时触发。</p>
<p>它还具有用于放置占位符的插槽，以便在加载幻灯片时显示某些内容。</p>
<h1 class="pgc-h-arrow-right">vue-awesome-swiper</h1>
<p>地址：https://github.com/surmon-china/vue-awesome-swiper</p>
<div class="pgc-img">
  <img alt="a08ace4d4baf890cfa9515a7eb7b1304.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f2231814c342ab28851c62e7a01b576f.png">
</div>
<p><strong>vue-awesome-swiper[2]</strong>是Vue应用程序的另一个易于使用的轮播组件。它基于Swiper，因此我们必须将其与软件包一起安装：</p>
<pre class="blockcode"><code>npm install swiper vue-awesome-swiper --save</code></pre>
<p>然后我们可以通过编写以下代码来使用它：</p>
<pre class="blockcode"><code>//app.jsimport Vue from "vue";import App from "./App.vue";import VueAwesomeSwiper from "vue-awesome-swiper";import "swiper/css/swiper.css";Vue.use(VueAwesomeSwiper);Vue.config.productionTip = false;new Vue({  render: h => h(App)}).$mount("#app");</code></pre>
<pre class="blockcode"><code>//App.vue</code></pre>
<div>
  <code> <img alt="" src=""></code>
</div>
<code></code>
<p>在这里，我们使用带有某些选项的 swiper 组件。swiper-slide 组件可容纳幻灯片，因此我们将图像放入其中。我们还将swiperOptions 传递给 options 属性。</p>
<p>我们使用 pagination 槽填充内容，并为分页设置一个类，以便可以对其进行样式设置。</p>
<p>我们也可以通过编程方式转到幻灯片。这就是为什么我们将 ref 分配给滑块的原因之一——移至所需的幻灯片。例如，我们可以这样写：</p>
<pre class="blockcode"><code>//App.js</code></pre>
<div>
  <code> <img alt="" src=""></code>
</div>
<code></code>
<p>我们使用分配给滑块的mySwiper ref创建了一个计算属性，然后调用 slideTo 方法来改变为具有给定索引的幻灯片。索引在第一个参数中，第二个参数是延迟，第三个参数指示我们是否要运行回调。如果将其设置为 true，它将在切换期间发出事件。</p>
<p>像vue-easy-slider一样，该轮播库也具有动画效果。</p>
<h1 class="pgc-h-arrow-right">Slick for Vue.js</h1>
<p>地址：https://github.com/staskjs/vue-slick</p>
<div class="pgc-img">
  <img alt="df9f30ffe78f8d7cb43614eddea42780.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-c6783defc01272688a176e01c807d781.png">
</div>
<p><strong>Slick for Vue.js[3]</strong>库为我们提供了另一个滑块。jQuery是一个依赖项，因此我们也必须安装它。要安装依赖项，请运行：</p>
<pre class="blockcode"><code>npm install jquery vue-slick --save</code></pre

app vue 真机运行_Vue.js轮播库热门精选

浏览过的版块