收藏
回答

swiper组件图片不显示?

index.wxml部分

<view class="content">
  <view class="search">
    <view class="searchInput">
      <image src="/pages/images/tubiao/search.png" style="width:15px;height:15px;"></image>
      <text class="searchContent">老用户福利</text>
    </view>
  </view>
  <view class="haibao">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"  >
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="silde-image" wx:key="key"></image>
         
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="nav">
    <block wx:for="{{navs}}">
      <view class="nav-item" bindtap="navBtn">
        <view>
          <image src="{{item.img}}" style="width:30px;height:30px;"></image>
        </view>
        <view>
          {{item.name}}
        </view>
      </view>
    </block>
  </view>
  <view class="category">
    精品推荐
  </view>
  <scroll-view scroll-x="true">
    <view class="items">
      <block wx:for="{{hotList}}">
        <view class="item" id="{{item.id}}" bindtap='seeDetail'>
          <view class="pic">
            <image src="{{item.listPic}}" mode="scaleToFill"></image>
          </view>
          <view class="name">{{item.goodsName}}</view>
          <view class="price">¥ {{item.goodsPrice}}</view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class="hr"></view>
  <view class="category">
    手机
  </view>
  <view class="items-normal">
      <block wx:for="{{phoneList}}">
        <view class="item-normal" id="{{item.id}}">
          <view class="pic">
            <image src="{{item.listPic}}" mode="scaleToFill"></image>
          </view>
          <view class="name">{{item.goodsName}}</view>
          <view class="price">¥ {{item.goodsPrice}}</view>
        </view>
      </block>
    </view>
      <view class="hr"></view>
  <view class="category">
    笔记本电脑
  </view>
  <view class="items-normal">
      <block wx:for="{{pcList}}">
        <view class="item-normal" id="{{item.id}}" bindtap='seeDetail'>
          <view class="pic">
            <image src="{{item.listPic}}" mode="scaleToFill"></image>
          </view>
          <view class="name">{{item.goodsName}}</view>
          <view class="price">¥ {{item.goodsPrice}}</view>
        </view>
      </block>
    </view>
</view>

index.js部分

var app = getApp();
var host = app.globalData.host;



Page({
  data: {
    indicatorDotstrue,
    autoplaytrue,
    interval5000,
    duration1000,
    imgUrls: [
      "../images/haibao/1.jpg",
      "../images/haibao/2.jpg",
      "../images/haibao/3.jpg"
    ],     
    navs:[
      {
        "img""/pages/images/icon/hwzq.jpg",
        "name":"华为专区"
      },
      {
        "img""/pages/images/icon/ryzq.jpg",
        "name""荣耀专区"
      },
      {
        "img""/pages/images/icon/lqzx.jpg",
        "name""领券中心"
      },
      {
        "img""/pages/images/icon/axjj.jpg",
        "name""安心居家"
      },
      {
        "img""/pages/images/icon/pt.jpg",
        "name""拼团"
      }
    ],
    
    hotList:[],
    phoneList:[],
    pcList:[],
    host: host,
    
  },
  onLoadfunction (options{
    var page = this;
    page.getBannerList();
    page.getGoodsList();
  },
  getBannerListfunction () {//获取海报轮播图片
    var page = this;
    wx.request({
      url: host + '/api/banner/getBannerList?type=1',
      method'GET',
      
      data: { },
      header: {
        'Content-Type''application/json'
      },
      successfunction (res{
        var code = res.data.code;
        var list = res.data.data;
        if (code == '0000') {
          var code = res.data.code;
          var list = res.data.data;
          if (code == '0000') {
            var imgUrls = new Array();
            for (var i = 0; i < list.length; i++) {
              imgUrls.push(host + "/" + list[i].url);
            }
            console.log(imgUrls);
            page.setData({ imgUrls: imgUrls });
          } 
        } 
      }
    })
  },
  getGoodsListfunction () {//获取商品图片
    var page = this;
    wx.request({
      url: host + '/api/goods/getHomeGoodsList',
      method'GET',
      data: {},
      header: {
        'Content-Type''application/json'
      },
      successfunction (res{
        var book = res.data.data;
        var phoneList = book.rmjs;
        var pcList = book.mssk;
        page.setData({ hotList: phoneList.concat(pcList) });//精品推荐列表
        page.setData({ phoneList: phoneList });//手机列表
        page.setData({ pcList: pcList });//笔记本电脑列表
      }
    })
  },
  onShareAppMessagefunction () {// 用户点击右上角分享
    return {
      title'华为商城'// 分享标题
      desc'华为商城是华为旗下面向全国服务的电子商务平台官网,提供正品华为手机(华为P30系列、华为Mate20系列、华为nova系列、荣耀9X、荣耀智慧屏、荣耀20、荣耀V20等'// 分享描述
      path'/pages/index/index' // 分享路径
    }
  },
})

轮播图不显示

回答关注问题邀请回答
收藏

3 个回答

  • brave
    brave
    2022-05-23

    截图下 imgUrls 的值

    2022-05-23
    有用 4
    回复
  • 茜茜又困了🐽
    茜茜又困了🐽
    2022-05-23

    为啥判断两次?

    这个时候list应该是个空数组,page.setData赋值操作会把你之前在data里定义的imgUrls覆盖掉。


    2022-05-23
    有用 1
    回复
  • Frank
    Frank
    2022-05-23

    审查元素,看下image标签的src的值是什么

    2022-05-23
    有用 1
    回复
登录 后发表内容