怎么把图片都循环显示在页面上？
发布于 7 年前 作者 yang08 2063 次浏览 来自 问答

怎么把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, //获取产品列表
        })
      },
    })
  }
})

现在的结果是这样的：

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

4 回复

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

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

而且你这块

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

把这里

修改这样

这样试试

  1. 直接把图片的数据手动添加到showLeds数据中是不合理的

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

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

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

回到顶部