微信小程序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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python如何实现远程方法调用
2020/08/07 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
给小学生的新年寄语
2014/04/04 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
迎新生晚会主持词
2015/06/30 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL