微信小程序swiper使用网络图片不显示问题解决


Posted in Javascript onDecember 13, 2019

这篇文章主要介绍了微信小程序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使用网络图片不显示问题解决

解决,swiper添加宽高。

wxss:

.container{
 width: 100%;
}
.container swiper{
 width: 100%;
}

能正常显示了:

微信小程序swiper使用网络图片不显示问题解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
Vue分页效果与购物车功能
Dec 13 #Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
微信小程序之左右布局的实现代码
Dec 13 #Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
You might like
php标签云的实现代码
2012/10/10 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python基于递归解决背包问题详解
2019/07/03 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
英国在线药房:Express Chemist
2019/03/28 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
品牌推广活动策划方案
2014/08/19 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Python实现仓库管理系统
2022/05/30 Python