微信小程序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%;
}
能正常顯示了：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了關于js內存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
用JS獲得表格當前行數的代碼...2007-01-01
這篇文章主要介紹了javascript獲取系統(tǒng)當前時間的方法，格式為：2015年11月19日 星期四09:21:05，需要的朋友可以參考下2015-11-11
uniapp實現h5、app與微信小程序三端pdf文件下載和預覽功能
作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關于uniapp實現h5、app與微信小程序三端pdf文件下載和預覽功能的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了javascript開發(fā)實現貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細介紹了原生JavaScript實現刮刮樂，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
拖放(drag-and-drop,DnD)其實是兩個動作——拖和放。所以，它涉及到兩個元素。一個是被拖的元素，稱為拖放源；另一個是要放的目標，稱為拖放目標。本文將通過拆分這兩個概念來詳細介紹原生拖放，感興趣的朋友一起學習吧2016-09-09
js實現的點擊超鏈顯示隱藏層...2007-05-05
這篇文章主要介紹了javascript針對cookie的基本操作,結合實例形式較為詳細的分析了JavaScript操作cookie的基本技巧,并給出了一個JavaScript操作cookie的完整類,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
逐行分析鴻蒙系統(tǒng)的 JavaScript 框架(推薦)
鴻蒙系統(tǒng)使用 JavaScript 開發(fā) GUI 是一種類似于微信小程序、輕應用的模式。這篇文章給大家?guī)砹酥鹦蟹治鲽櫭上到y(tǒng)的 JavaScript 框架的相關知識，感興趣的朋友跟隨小編一起看看吧2020-09-09