收藏
回答

怎么把图片都循环显示在页面上?

怎么把showLeds.images里的图片都显示到页面上去?


想要每一个图片在每一个商品名称的上面,我需要怎么实现呀?


<view class="newest-box" wx:for="{{showLeds}}" wx:key="index">
  <view class="newest-list" data-id='{item.id}'>
    <!-- 传值到详情页 -->
    <!-- <block wx:for="{{images}}" wx:for-item="id"> -->

    <navigator url="../details/details?id={{item.id}}&name={{item.name}}&price={{item.price}}">


<!--这段代码想实现显示图片-->

      <block wx:for-item="{{images}}" wx:key="{{images.id}}">
      <image src="{{images.image}}"></image>
      <!-- <image src="/image/led.png"></image> -->

      </block>


      <view class="newest-text">
        <text>{{item.name}}</text>
      </view>
      <view class="newest-text">
        <text>¥ {{item.price}}</text>
      </view>
    </navigator>
    <!-- </block> -->
  </view>
</view>



Page({
  data: {
    imgUrls: [
      '/image/banner.png',
      '/image/pingbenshi.png',
      '/image/pingbenshi-2.png'
    ],
    showLeds:[{
      name:'',
      price:'',
      id:'',
      images:[{'id':11,'image':'/image/kongzhiqi.png'},
              {'id':12,'image':'/image/baonian.png'},
              {'id':13,'image':'/image/baonian.png'},
              {'id':14,'image':'/image/baonian.png'},
              {'id':15,'image':'/image/ping.png'}
    ]}]
    ,
    indicatorDots: false,
    autoplay: false,
    interval: 3000,
    duration: 800,
    loadingHidden: false  // loading
  },
  onLoad: function(options) {
    var that = this;
    let id = options.id;
     
    that.getShowLeds();
   
  },
  onReady: function(options) {
 
  },
  onShow: function(options) {
 
  },
  getShowLeds: function(e) {
    var that = this;
    //展示屏幕列表
    wx.request({
      url: api.showLeds,
      header: {
        'content-type': 'application/json' // 默认值x-www-form-urlencoded
      },
      method: "GET",
      success: function(res) {
        console.log(res.data);
        that.setData({
          showLeds: res.data.list, //获取产品列表
        })
      },
    })
  }
})


现在的结果是这样的:





想要结果是这样的:但是图片是每一个商品配一个图片。不像我这个就只是这一个图片。





最后一次编辑于  2018-11-30  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 函数(繁芜)
    函数(繁芜)
    2018-12-01
    1. 直接把图片的数据手动添加到showLeds数据中是不合理的

    2. 如果你一定要手动加只是测试用的,那完全可以获取后台数据后循环进行图片字段的添加

    3. 顺便说下你的数据对象的结构不对

    4. 这个网友的代码是对的



    2018-12-01
    赞同 1
    回复 1
    • 无聊才读书
      无聊才读书
      2018-12-02

      感谢

      2018-12-02
      回复
  • จุ๊บ
    จุ๊บ
    2018-11-29

    把这里修改这样这样试试

    2018-11-29
    赞同
    回复 2
    • 无聊才读书
      无聊才读书
      2018-11-29

      没有显示,大神。代码改了使用1b的时候报错了,使用b没报错但是也没有好使,请大神指点。感谢了。

      2018-11-29
      回复
    • 无聊才读书
      无聊才读书
      2018-11-29

      页面上显示的商品名和价格都是来自后台的。在下面的setdata里渲染到页面上的。

      2018-11-29
      回复
  • 哥特式KK
    哥特式KK
    2018-11-29

    你现在的数据结构是每个商品下有5张图片,你是想实现什么?

    而且你这块


    应该缺少wx:for="{{item.images}}"

    2018-11-29
    赞同
    回复 13
    • 无聊才读书
      无聊才读书
      2018-11-29

      谢谢,是想要把这5个图片分别给每一个商品。在每一个商品上显示一个图片。

      2018-11-29
      回复
    • 哥特式KK
      哥特式KK
      2018-11-29回复无聊才读书

      那你数据的结构就要处理,处理成每个商品下对应一个图片,逻辑尽量放在数据处理那边,不要在视图显示这块儿处理

      2018-11-29
      回复
    • 无聊才读书
      无聊才读书
      2018-11-29回复无聊才读书

      我应该怎么改那五个图片呢?

      2018-11-29
      回复
    • 无聊才读书
      无聊才读书
      2018-11-29

      页面上显示的商品名和价格都是来自后台的。在下面的setdata里渲染到页面上的。请求大神指教。

      2018-11-29
      回复
    • 哥特式KK
      哥特式KK
      2018-11-29回复无聊才读书

      就是数据处理,把images处理到各个产品下面,这个没什么讲的

      2018-11-29
      回复
    查看更多(8)
  • 这都申请了
    这都申请了
    2018-11-29

    现在不对吗?而且列表页为什么要展示所有图片呢?

    2018-11-29
    赞同
    回复 1
    • 无聊才读书
      无聊才读书
      2018-11-29

      不对,没有图片没有显示出来。

      2018-11-29
      回复