微信小程序swiper使用网络图片不显示问题解决
更新时间：2019年12月13日 14:39:15 作者：dongrui23
这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
wxml代码：
<view class="container">
<swiper indicator-dots="true}"
autoplay="true" interval="3000" duration="1">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" width="355" height="150"></image>
</swiper-item>
</block>
</swiper>
</view>
js代码：
data: {
imgUrls: [
"http://img0.imgtn.bdimg.com/it/u=2394972844,3024358326&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=3008142408,2229729459&fm=26&gp=0.jpg",
"http://img4.imgtn.bdimg.com/it/u=2939038876,2702387014&fm=26&gp=0.jpg"
]
}
结果：（无法显示，查看控制台无报错）
解决，swiper添加宽高。
wxss：
.container{
width: 100%;
}
.container swiper{
width: 100%;
}
能正常显示了：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript学习小结(一)——JavaScript入门基础
本教程比较适合javascript初学者，对javascript基本知识的小结包括变量，基本类型等知识点，需要的朋友一起来学习吧2015-09-09
比较详细的实例分析了dom的一些常用方法2008-09-09
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单3D开关书本模型的效果,文中的实现代码讲解的非常详细,具有一定参考价值,感兴趣的同学可以动手尝试一下2023-11-11
这篇文章主要介绍了antd upload控件的data参数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
关于数组或对象遍历，相信很多人都没有深入观察过执行效率。这是一个曾在群里吵翻天的话题，读懂后你将成为遍历效率话题的大师。下面这篇文章主要介绍了Javascript中八种遍历方法执行速度深度对比的相关资料，需要的朋友可以参考下。2017-04-04
这篇文章主要介绍了javascript实现一个数值加法函数，十分的简单实用，方便大家理解javascript，有需要的小伙伴可以参考下。2015-06-06
本篇文章是对捕获键盘事件(且兼容各浏览器)的实现进行了详细的分析介绍，需要的朋友参考下2013-07-07
取容器大小、定位、距离等在实际中使用的比较广泛，下面与大家分享下小编整理的js相关代码，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了JavaScript中用字面量创建对象介绍,本文直接给出代码实例,并讲解了一些技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论