el-carousel实现分页

最新推荐文章于 2022-11-07 17:56:18 发布

原创

最新推荐文章于 2022-11-07 17:56:18 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用Element UI的el-carousel组件创建一个功能完善的分页系统。通过实例代码和配置说明，展示了如何定制分页样式，实现动态加载和导航功能，提升用户体验。

<el-carousel :interval="5000" arrow="always" :autoplay="false" height="600px">
    <el-carousel-item v-for="item in Math.ceil(goodsList.length / 4)" :key="item">
        
        <ul class="price-main">
          
          <li v-for="(site,index) in goodsList.slice((item - 1) * 4, item * 4)" 
              :key="site.id"
              v-if="index<=3"
              >
              
                <p>
                  <span class="shortname">{
  
  {site.shortname}}</span>
                  <span class="label">{
  
  {site.label}}</span>
                  <span class="label">{
  
  {site.label1}}</span>
                </p>
                <p>
                  <ol>
                    <li>
                      <p>贴现率（%）</p>
                      <span>{
  
  {site.price}}</span>

                    </li>
                    <li