react中如何使用swiper - Powered by Discuz! Archiver

首页 › React论坛 › react中如何使用swiper

荣盛华府 發表於 2019-7-25 11:52:00

react中如何使用swiper

<p><span style="font-family: 黑体; color: rgba(255, 0, 0, 1)"><strong><span style="font-size: 18pt"> react中怎么使用基本swiper</span></strong></span></p>
<p><span style="font-family: "Microsoft YaHei"; color: rgba(0, 0, 0, 1); font-size: 14px">　　第一步：安装包</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm i swiper -S
</pre>
</div>
<p>　　第二步：引包</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.css'
</pre>
</div>
<p>　　第三步：写html</p>
<div class="cnblogs_code">
<pre> 
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-container</span><span style="color: rgba(128, 0, 0, 1)">"</span>>

   
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-wrapper</span><span style="color: rgba(128, 0, 0, 1)">"</span>>

         
         <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-slide</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Slide <span style="color: rgba(128, 0, 128, 1)">1</span></div>
         <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-slide</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Slide <span style="color: rgba(128, 0, 128, 1)">2</span></div>
         <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-slide</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Slide <span style="color: rgba(128, 0, 128, 1)">3</span></div>
   </div>

   
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-pagination</span><span style="color: rgba(128, 0, 0, 1)">"</span>></div>

   
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-button-prev</span><span style="color: rgba(128, 0, 0, 1)">"</span>></div>
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-button-next</span><span style="color: rgba(128, 0, 0, 1)">"</span>></div>

   
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">swiper-scrollbar</span><span style="color: rgba(128, 0, 0, 1)">"</span>></div>
</div></pre>
</div>
<p>　　第四步：调用　　</p>
<p>　　<strong><span style="color: rgba(255, 0, 0, 1)">注意： // 直接引用数据将，new Swiper放在componentDidMount</span></strong><br><strong><span style="color: rgba(255, 0, 0, 1)">             　　　　　 // 用axios请求数据，new Swiper放在componentDidUpdate</span></strong></p>
<p> </p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">new</span> Swiper(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">.swiper-container</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">, {
   direction: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">vertical</span><span style="color: rgba(128, 0, 0, 1)">'</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">竖向轮播</span>
   loop: <span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">无缝轮播</span>
   pagination: {<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">小圆点分页</span>
         el: <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">.swiper-pagination</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
   },
   navigation: {</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">左右分页</span>
         nextEl: <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">.swiper-button-next</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
         prevEl: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">.swiper-button-prev</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
   },
   scrollbar: {</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">下划线分页</span>
         el: <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">.swiper-scrollbar</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
   }
})</span></pre>
</div>
<p> </p>
<p>参考网站：http://idangero.us/swiper/get-started/</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/Ann-web-1/p/11243310.html

頁: [1]

查看完整版本: react中如何使用swiper