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

能正常显示了:

    

原文地址:https://www.cnblogs.com/dongrui23/p/12004593.html

时间: 2024-10-12 13:34:10

微信小程序swiper使用网络图片不显示问题的相关文章

如何自定义微信小程序swiper轮播图面板指示点的样式

https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: <swiper class="swiper-box" indicator-

绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. 1 bindchangeSwiper(event) { 2 console.log(event.detail); 3 this.setData({ 4 current: event.detail.current 5 }) 6 }, 可是有的时候我们确实需要动态获取当前的swiper-item索引,用来额外做一些其

自定义微信小程序swiper轮播图面板指示点的样式

微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: 1 2 3 4 5 6 7 8 9 <swiper class="swiper-box" indicator-dots="{{ indicatordots }}

微信小程序之多列表的显示和隐藏功能(附源码)

今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

微信小程序swiper 前后边距的使用

小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的一小部分 假设设置 一个view的尺寸为宽为600rpx,高为600rpx,前边距为30rpx,后边距为30rpx,最终呈现结果是这样的 图一和图二     图三 这是将图片尺寸设置跟屏幕宽一样的尺寸,然后就没有之间的空白间隙了,所有得为图片加上空白间距 但这并不是想要的结果,其实边距指的是后面那张

第五篇、微信小程序-swiper组件

常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx:for="{{im

微信小程序--swiper组件

<view class='swiper-container'> <swiper indicator-dots="true" autoplay="true" interval="5000" vertical="{{false}}" class='swiper' class='aaa'> <block wx:for="{{imgUrls}}"> <swiper-item

微信小程序swiper禁止用户手动滑动

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

微信小程序 swiper 组件坑

swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....> <swiper-item> <image mode='widthFix' ...... /> </swiper-item> </swiper> <style>.text{ heigh