Swiper 的轮播图对象(标题，图标，链接，按钮)可以是 for 循环对象吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2281 天前的主题，其中的信息可能已经有所发展或是发生改变。

想在页面中添加轮播图效果，然而 swiper 的文档没有 swiper-slide for 循环对象 的用法，翻遍文档中的案例都是固定的 slied1,2,3,4,5 的值

<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
<div class="swiper-slide">slide4</div>
<div class="swiper-slide">slide5</div>

我想知道类似于 vue.js 中vue-awesome-swiper 的 v-for 用法如：

<swiper-slide v-for="(page, index) of pages" :key="index">

这是部分原 html： https://pastebin.com/pMEgymrK 这是部分渲染后的 html： https://pastebin.com/U8SLANEX

10 条回复 • 2019-02-02 09:01:29 +08:00

paloalto

2018-08-30 14:23:34 +08:00

为什么不在模板里循环输出？你前端用的什么模板？是 python 的 mako 吗？去搜对应的模板循环语法就可以了。

paloalto

2018-08-30 14:26:07 +08:00

% for item in list:
<div class="swiper-slide">item-${row}</div>
% endfor

paloalto

2018-08-30 14:28:42 +08:00

http://docs.makotemplates.org/en/latest/syntax.html#control-structures

elsagong

2018-08-30 16:49:28 +08:00

@paloalto 前端用的 jquery，bootstrap，scss，不是 mako 哦，还是感谢你

doommm

2018-08-30 19:40:33 +08:00

`v-for`列表渲染`swiper-item`，然后外面用一个 container 包起来，这是用 vue 包装过后的用法。
用 jQuery 的话思路应该也差不多吧，遍历列表创建`swiper-item`对应的 dom 节点，然后用`swiper`加载？
稍微看一看`vue-awesome-swiper`的源码应该就明白了

paloalto

2018-08-30 21:31:51 +08:00

@elsagong #4 你后端数据怎么传给前端的？是后端直接渲染前端的模板吗？还是只在模板的 script 里插入数据？

xusongfu5050

2018-08-31 08:33:08 +08:00

可以，我就这么干过，我使用的 VUE,直接 v-for

elsagong

2018-09-01 14:35:49 +08:00

@paloalto 我前后端没有分离.....

elsagong

2018-09-01 14:36:40 +08:00

@xusongfu5050 我知道 vue 可以用 v-for，我现在用的是 swiper，不是 vue-awesome-swiper，不是 vue.........所以不能用 v-for。

xusongfu5050

2019-02-02 09:01:29 +08:00

@elsagong 我用的也是 swiper,不是 vue-awesome-swiper，如果你没有用 vue,你就用原生 js 循环生成<div class="swiper-slide">slide1</div>,然后 appendTo 父元素应该就可以了吧。