想在页面中添加轮播图效果,然而 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
1
paloalto 2018-08-30 14:23:34 +08:00
为什么不在模板里循环输出?你前端用的什么模板?是 python 的 mako 吗?去搜对应的模板循环语法就可以了。
|
2
paloalto 2018-08-30 14:26:07 +08:00
% for item in list:
<div class="swiper-slide">item-${row}</div> % endfor |
3
paloalto 2018-08-30 14:28:42 +08:00
|
5
doommm 2018-08-30 19:40:33 +08:00
`v-for`列表渲染`swiper-item`,然后外面用一个 container 包起来,这是用 vue 包装过后的用法。
用 jQuery 的话思路应该也差不多吧,遍历列表创建`swiper-item`对应的 dom 节点,然后用`swiper`加载? 稍微看一看`vue-awesome-swiper`的源码应该就明白了 |
7
xusongfu5050 2018-08-31 08:33:08 +08:00
可以,我就这么干过,我使用的 VUE,直接 v-for
|
9
elsagong OP @xusongfu5050 我知道 vue 可以用 v-for,我现在用的是 swiper,不是 vue-awesome-swiper,不是 vue.........所以不能用 v-for。
|
10
xusongfu5050 2019-02-02 09:01:29 +08:00
@elsagong 我用的也是 swiper,不是 vue-awesome-swiper,如果你没有用 vue,你就用原生 js 循环生成<div class="swiper-slide">slide1</div>,然后 appendTo 父元素应该就可以了吧。
|