V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
elsagong
V2EX  ›  程序员

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

  •  
  •   elsagong · 2018-08-30 13:52:50 +08:00 · 2651 次点击
    这是一个创建于 2267 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想在页面中添加轮播图效果,然而 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.jsvue-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
        1
    paloalto  
       2018-08-30 14:23:34 +08:00
    为什么不在模板里循环输出?你前端用的什么模板?是 python 的 mako 吗?去搜对应的模板循环语法就可以了。
    paloalto
        2
    paloalto  
       2018-08-30 14:26:07 +08:00
    % for item in list:
    <div class="swiper-slide">item-${row}</div>
    % endfor
    elsagong
        4
    elsagong  
    OP
       2018-08-30 16:49:28 +08:00
    @paloalto 前端用的 jquery,bootstrap,scss,不是 mako 哦,还是感谢你
    doommm
        5
    doommm  
       2018-08-30 19:40:33 +08:00
    `v-for`列表渲染`swiper-item`,然后外面用一个 container 包起来,这是用 vue 包装过后的用法。
    用 jQuery 的话思路应该也差不多吧,遍历列表创建`swiper-item`对应的 dom 节点,然后用`swiper`加载?
    稍微看一看`vue-awesome-swiper`的源码应该就明白了
    paloalto
        6
    paloalto  
       2018-08-30 21:31:51 +08:00
    @elsagong #4 你后端数据怎么传给前端的?是后端直接渲染前端的模板吗?还是只在模板的 script 里插入数据?
    xusongfu5050
        7
    xusongfu5050  
       2018-08-31 08:33:08 +08:00
    可以,我就这么干过,我使用的 VUE,直接 v-for
    elsagong
        8
    elsagong  
    OP
       2018-09-01 14:35:49 +08:00
    @paloalto 我前后端没有分离.....
    elsagong
        9
    elsagong  
    OP
       2018-09-01 14:36:40 +08:00
    @xusongfu5050 我知道 vue 可以用 v-for,我现在用的是 swiper,不是 vue-awesome-swiper,不是 vue.........所以不能用 v-for。
    xusongfu5050
        10
    xusongfu5050  
       2019-02-02 09:01:29 +08:00
    @elsagong 我用的也是 swiper,不是 vue-awesome-swiper,如果你没有用 vue,你就用原生 js 循环生成<div class="swiper-slide">slide1</div>,然后 appendTo 父元素应该就可以了吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3985 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:13 · PVG 12:13 · LAX 20:13 · JFK 23:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.