Swiper中文论坛

标题: 分页器都出不来，请大神们帮看下 [打印本页]

作者: chaim024 时间: 2019-9-17 17:46
标题: 分页器都出不来，请大神们帮看下

按照swiper的api上的实例写的代码，分页器都出不来，用调试工具看下分页器标签里面没有任何子标签，请大神们帮看下

HTML 代码如下：
<div id="app">
<div v-show="list.length" class="col-md-6" v-cloak>
<div class="card swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="card-body swiper-slide" v-for="(li, idx) in list" :key="li.oid">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="top head">
<tr>
<th>看板号</th>
<th class="text-thick"><a :href="'board.php?oid=' + li.oid">{{li.oid}}</a></th>
<th>产品名</th>
<th class="text-thick">{{li.productname}}</th>
</tr>
<tr>
<th>部件名</th>
<th class="text-thick">{{li.partname}}</th>
<th>计划产量</th>
<th class="text-thick">{{li.count}}</th>
</tr>
<tr>
<th class="noteheight">备注</th>
<th colspan="3" class="text-thick noteleft">{{li.note}}</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive swiperh">
<table class="table table-striped">
<thead>
<tr>
<th width="20%">工序名</th>
<th>完成数量</th>
<th>完成日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in li.list" :key="index">
<td class="text-nowrap">{{item.progressname}}</td>
<td><input type="number" :disabled="item.disabled" placeholder="填写数量" v-model="item.finishcount" /></td>
<td>{{item.finishdate}}</td>
<td class="btn-group" role="group">
<button type="button" :disabled="item.disabled" class="btn btn-lg btn-default" @click="handleClickSubmit(idx, index)">提交</button>
</td>
</tr>
<tr v-for="im in objTmp[li.oid]">
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
</tbody>
</table>
</div>
</div>
</div>
      <div class="swiper-pagination" id="swiper-pagination"></div>
</div>
</div>
<div v-show="!list.length" class="noData"><span>暂时没有要处理的任务！</span></div>
</div>

js 代码如下：（只选取其中swiper部分）
            mounted() {
                  new Swiper('#swiper1', {  //swiper初始化
                     direction: 'vertical', //滑动方向为竖向
                     pagination: {          //分页器
                        el: '#swiper-pagination', //分页器选择器
                        type: 'bullets',    //分页器类型
                     },
                     paginationClickable: true,
                     observer: true,//修改swiper自己或子元素时，自动初始化swiper
                     observeParents: true,//修改swiper的父元素时，自动初始化swiper
                  });
            },

作者: 偶奥斯 时间: 2019-9-18 11:29
子元素的类名不对。swiper-slide

作者: chaim024 时间: 2019-9-18 14:21

偶奥斯发表于 2019-9-18 11:29
子元素的类名不对。swiper-slide

子元素的类名是这个，没错的。

作者: 偶奥斯 时间: 2019-9-18 15:05

chaim024 发表于 2019-9-18 14:21
子元素的类名是这个，没错的。

你所说的分页，每一页的子元素都要有swiper-slide类名，而且你要设置父容器的高度，高度不够不分页。

作者: chaim024 时间: 2019-9-18 16:15

偶奥斯发表于 2019-9-18 15:05
你所说的分页，每一页的子元素都要有swiper-slide类名，而且你要设置父容器的高度，高度不够不分页。 ...

大神，我没看明白，可以指一下哪里的问题吗？多谢了

作者: 偶奥斯 时间: 2019-9-18 16:57

chaim024 发表于 2019-9-18 16:15
大神，我没看明白，可以指一下哪里的问题吗？多谢了

你加句import 'swiper/css/swiper.min.css'；你估计是没引入swiper的样式。要是只有一个子元素也划不动的，每个子元素都要加swiper-slide类名

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)