怎么把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"> -->
<!--这段代码想实现显示图片--> <block wx:for-item="{{images}}" wx:key="{{images.id}}"> <image src="{{images.image}}"></image> <!-- <image src="/image/led.png"></image> -->
<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, //获取产品列表 }) }, }) }}) |
现在的结果是这样的：
想要结果是这样的：但是图片是每一个商品配一个图片。不像我这个就只是这一个图片。
直接把图片的数据手动添加到showLeds数据中是不合理的
如果你一定要手动加只是测试用的，那完全可以获取后台数据后循环进行图片字段的添加
顺便说下你的数据对象的结构不对
这个网友的代码是对的
感谢
把这里![]()
修改这样![]()
这样试试
页面上显示的商品名和价格都是来自后台的。在下面的setdata里渲染到页面上的。
你现在的数据结构是每个商品下有5张图片，你是想实现什么？
而且你这块
应该缺少wx:for="{{item.images}}"
谢谢，是想要把这5个图片分别给每一个商品。在每一个商品上显示一个图片。
那你数据的结构就要处理，处理成每个商品下对应一个图片，逻辑尽量放在数据处理那边，不要在视图显示这块儿处理
我应该怎么改那五个图片呢？
页面上显示的商品名和价格都是来自后台的。在下面的setdata里渲染到页面上的。请求大神指教。
就是数据处理，把images处理到各个产品下面，这个没什么讲的
现在不对吗？而且列表页为什么要展示所有图片呢？
不对，没有图片没有显示出来。