微信小程序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%;
}

能正常显示了：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序利用swiper+css实现购物车商品删除功能

    要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <

  • 微信小程序swiper实现滑动放大缩小效果

    微信小程序swiper实现滑动放大缩小效果

    效果图如下所示: 具体代码如下所示: <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:index="{{index}}&qu

  • 微信小程序使用swiper组件实现层叠轮播图

    微信小程序使用swiper组件实现层叠轮播图

    本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i

  • 微信小程序swiper禁止用户手动滑动代码实例

    前言 最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用 catchtouchmove 事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 代码: WXML: <swi

  • 微信小程序实现的3d轮播图效果示例【基于swiper组件】

    微信小程序实现的3d轮播图效果示例【基于swiper组件】

    本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f

  • 微信小程序视图容器（swiper）组件创建轮播图

    本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

  • 微信小程序 swiper 组件遇到的问题及解决方法

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....>

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

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

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

    这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml代码: <view class="container"> <swiper indicator-dots="true}" autoplay="true" interval="3000" duration="1">

  • 微信小程序swiper左右扩展各显示一半代码实例

    微信小程序swiper左右扩展各显示一半代码实例

    这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现如下的功能: 动图展示效果 代码如下: index.wxml <swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-

  • 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个

  • 微信小程序 swiper组件详解及实例代码

    微信小程序 swiper组件详解及实例代码

    微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序 swiper组件构建轮播图的实例

    微信小程序 swiper组件构建轮播图的实例

    微信小程序 swiper组件构建轮播图的实例 实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu

  • 微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换 实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序swiper组件用法实例分析【附源码下载】

    微信小程序swiper组件用法实例分析【附源码下载】

    本文实例讲述了微信小程序swiper组件用法.分享给大家供大家参考,具体如下: 关于视图容器swiper的详细内容可参考官方文档 先来看看运行效果: index.js: Page({ data: { imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jp

  • 微信小程序使用progress组件实现显示进度功能【附源码下载】

    微信小程序使用progress组件实现显示进度功能【附源码下载】

    本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码 代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关

随机推荐