按照网上的教程弄了一个轮播图片,用的是swiper组件。开始用了相对路径图片,后来查网上说不能用,于是改了http链接,结果还是没有显示出来。搞了一个晚上,实在是不知道怎么回事了。不校验合法域名以及https证书那个已经点了,但是图片依旧不显示。求大大们帮我看看是咋回事。
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}
.swiper {
height: 348rpx;
}
.slide-image {
width: 100%;
height: 100%;
}
index.wxml
<!--index.wxml-->
<view class="container">
<swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{advertsImagesUrls}}" wx:key="key">
<swiper-item>
<image src='{{item}}' class='slide-image' />
</swiper-item>
</block>
</swiper>
</view>
index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
indicatorActiveColor: "#fff",
advertsImagesUrls: [
"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
"http://img.tcdachun.com/tuku/yulantu/130408/240471-13040P6110427.jpg",
],
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
toupper:function(){
console.log("触发了toupper");
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
显示啊,代码块链接:https://developers.weixin.qq.com/s/2xcxXdm67guC
审查元素看下swiper内部的image标签是否有src属性;
检查wxss是否设置;