公告列表
公告列表
收藏
回答

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

怎么把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-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
      赞
      回复
请 登录 后发表内容
相关文档