template.js动态展示轮播图,轮播图不显示问题

使用template.js把轮播图的图片渲染到页面后,发现无法显示;这一切是dom的缺失,还是bootstrap插件的沦丧?让我们走进代码的世界,找寻真相。

  1. 首先,打开控制台发现,图片dom是生成了的,排除dom的缺失
  2. 其次,换了一个插件Swiper,发现效果一样,排除插件的沦丧

把动态数据换成假数据,发现没问题;那就只有从轮播图本身去寻找答案了

最后发现,按道理轮播图的实例化是在dom生成后,所以假数据没问题,而采用template.js后实例化轮播图的时候dom还没生成完,所以最后dom虽然有了,但是轮播图实例化其实失败了。

解决方法就是:在dom生成之后再实例化轮播图,如下:

// 数据
  function getCooperative() {
    $.get('/api/article/findFriend', {}, function (res) {
      let html = template('cooperativeChild', res.data)
      document.getElementById('cooperative').innerHTML = html
      jQuery('.flexslider').flexslider({
        animation: "fade",
        prevText: "",
        nextText: "",
        slideshow: true
      });
    })
  }
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值