为什么在手机端测试的时候导航的图标和底部的首页，购物车都看不到呢？
来源：1-5 使用数据循环展示内容项
强妹妹7248924
2021-05-19 14:54:30
为什么在手机端测试的时候导航的图标和底部的首页，购物车都看不到呢？
<view class="header">
<input type="text" placeholder="AngularJS.MySQL.Java" class="header-input" bindinput="handleInputChange" />
<icon type="search" class="header-icon" wx:if="{{iconShow}}"></icon>
</view>
<!-- nav -->
<view class="nav">
<view class="nav-item">
<image class="nav-img" src="../../icon/推荐@2x.png"></image>
推荐
</view>
<view class="nav-item">
<image class="nav-img" src="../../icon/实战@2x.png"></image>
实战
</view>
<view class="nav-item">
<image class="nav-img" src="../../icon/路径@2x.png"></image>
路径
</view>
<view class="nav-item">
<image class="nav-img" src="../../icon/课程@2x.png"></image>
活动
</view>
</view>
<!-- 轮播图 -->
<swiper class="nav-swiper" autoplay="{{true}}" previous-margin="24rpx" next-margin="24rpx" circular="{{true}}">
<swiper-item class="swiper-list" wx:for="{{swiperData}}" wx:key="*this">
<image class="swiper-img" src="{{item.swiperUrl}}"></image>
</swiper-item>
</swiper>
<!-- 实战推荐 -->
<view class="recommend">
<view class="recommend-title">实战推荐</view>
<view class="recommend-content" wx:for="{{recommend}}" wx:key="*this">
<image class="recommend-content-img" src="{{item.recommendUrl}}"></image>
<view class="recommend-content-right">
<view class="recommend-content-title">{{item.recommendTitle}}</view>
<view class="price" wx:if="{{!item.Pricemphasis}}">{{item.recommendPrice}}</view>
<view class="newprice" wx:if="{{item.Pricemphasis}}">{{item.recommendPrice}}</view>
<view class="preference" wx:if="{{item.preference}}">{{item.preferenceContent}}</view>
<view class="leve">{{item.recommendLeve}}</view>
<view class="hot">
{{item.recommendHot}}
</view>
</view>
</view>
</view>
.header{
position: relative;
}
.header-input{
width: 680rpx;
height: 72rpx;
border: 1px solid #D9DDE1;
margin: 32rpx 36rpx 8rpx 36rpx;
text-align: center;
font-size: 13px;
color: rgba(133,133,133,0.60);
border-radius: 36rpx;
}
.header-icon{
position: absolute;
top: 15rpx;
left: 150rpx;
width: 26rpx;
height: 28rpx;
color: rgba(133,133,133,0.60);
}
.nav{
width: 750rpx;
height: 112rpx;
display: flex;
}
.nav-item{
flex: 1;
text-align: center;
font-size: 32rpx;
color: #2B333B;
height: 112rpx;
line-height: 112rpx;
}
.nav-img{
width: 36rpx;
height: 36rpx;
position: relative;
top: 8rpx;
}
.nav-swiper{
width: 750rpx;
height: 232rpx;
}
.swiper-list{
width: 702rpx;
height: 232rpx;
margin: 0 12rpx;
}
.swiper-img{
width: 682rpx;
height: 232rpx;
border-radius: 12rpx;
}
.recommend{
margin: 32rpx 24rpx 0;
width: 702rpx;
}
.recommend-title{
font-size: 14px;
color: #2B333B;
line-height: 16px;
height: 112rpx;
height: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.recommend-content{
display: flex;
margin-bottom: 34rpx;
}
.recommend-content-img{
width: 208rpx;
height: 136rpx;
border-radius: 12rpx;
margin-right: 24rpx;
}
.recommend-content-right{
border-bottom: 1px solid #D9DDE1;
}
.recommend-content-title{
font-size: 32rpx;
color: #2B333B;
line-height: 40rpx;
font-weight: bold;
width: 470rpx;
height: 80rpx;
margin-bottom: 14rpx;
}
.price{
float: left;
font-size: 22rpx;
color: #71777D;
line-height: 30rpx;
margin-right: 18rpx;
width: 54.4rpx;
height: 32rpx;
}
.leve{
float: left;
font-size: 22rpx;
color: #71777D;
line-height: 30rpx;
margin-right: 36rpx;
}
.newprice{
float: left;
font-size: 22rpx;
color: #F01414;
line-height: 30rpx;
margin-right: 18rpx;
}
.preference{
float: left;
font-size: 20rpx;
color: #F20D0D;
line-height: 30rpx;
margin-right: 18rpx;
background: rgba(242,13,13,0.10);
}
.hot{
float: left;
font-size: 22rpx;
color: #71777D;
line-height: 30rpx;
}
Page({
data:{
iconShow:true,
swiperData:[
{
swiperUrl:"//img3.mukewang.com/6086373a097aa9d118000600.png"
},
{
swiperUrl:"//img3.mukewang.com/60989bfd098afd8418000600.png"
},
{
swiperUrl:"//img1.mukewang.com/602c5498094d056400000000.png"
},
{
swiperUrl:"//img.mukewang.com/609b4d76092a267f18000600.png"
},
],
recommend:[
{
recommendUrl:"https://img2.mukewang.com/szimg/5fbf616b09c6210a12000676.png",
recommendTitle:"C语言系统化精讲 重塑你的编程思想 打造坚实的开发基础",
recommendPrice:"¥299",
Pricemphasis:false,
preference:true,
preferenceContent:"APP购买立减 ¥3",
recommendLeve:"进阶",
recommendHot:"2316"
},{
recommendUrl:"https://img2.mukewang.com/szimg/5fdb394608def73a00000000.jpg",
recommendTitle:"迈向高级的Java面试突围课",
recommendPrice:"¥299",
Pricemphasis:false,
preference:false,
preferenceContent:"APP购买立减 ¥3",
recommendLeve:"进阶",
recommendHot:"2316"
},{
recommendUrl:"https://img1.mukewang.com/szimg/5ed0bbc908af61c706000338.jpg",
recommendTitle:"体系课-数据可视化入门到精通-打造前端差异化竞争力",
recommendPrice:"¥299",
Pricemphasis:true,
preference:false,
preferenceContent:"APP购买立减 ¥3",
recommendLeve:"进阶",
recommendHot:"2316"
}
]
},
handleInputChange(e) {
if(e.detail.value){
this.setData({ iconShow:false})
}else{
this.setData({ iconShow:true})
}
}
})
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "慕课",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar":{
"list": [
{
"pagePath":"pages/index/index",
"text": "首页",
"iconPath": "icon/1.png",
"selectedIconPath": "icon/1.png"
},{
"pagePath":"pages/index/index",
"text": "购物车",
"iconPath": "icon/2.png",
"selectedIconPath": "icon/2.png"
},{
"pagePath":"pages/index/index",
"text": "我的",
"iconPath": "icon/3.png",
"selectedIconPath": "icon/3.png"
}
],
"color": "#B7BBBF",
"selectedColor": "#2B333B"
}
}
1回答
-
好帮手慕慕子
2021-05-19
同学你好，微信开发者工具上可以看到图片，但是手机端看不到照片是吗？
代码是没有问题的，老师测试同学粘贴的这部分代码，手机测试效果也是对的，如下图所示：
建议：
1、检查下引入图片的地址是否正确。
2、可以将下图圈起来的引入图片的地址前面添加./后测试下。
如果还是不可以的话，目前阶段，推荐同学直接在微信开发者工具上编写代码，并查看效果就可以了。
祝学习愉快~
0
相似问题