案例
刚开始请求未处理长成这样
https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-1.jpg,https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-2.jpg,https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-3.jpg,
用split切割(字符串切割成字符串数组)
长这样
["https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-1.jpg", "https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-2.jpg", "https://www.sndn.cloud/attachment/sy_pests_img/rich/img/17462-3.jpg"]
出现请求数据当中多个图片在一个里面,其一我们要让它在页面渲染显示出来只显示其中一个,其二我们把它全部显示渲染上
其一
这个是在请求接口时把这些逻辑写上
item.imgList 这里面的imgList 是你自定义的,
item.pic 这里面的pic 是你请求接口时对应显示的图片
因为我们是数据请求的多个所以要循环遍历截取如下所示
let data=res.data.data.list;//这个是我们请求的对应接口
data.forEach(item => item.imgList = item.pic.split(','))
that.setData({
// Pests and diseases缩写
PaD: data//这个是拿数据的值 ,然后在页面渲染直接for pad
})
这个是渲染写入
因为你在请求接口时自定义了imgList ,这边你要用你自定义的那个
这边是在请求渲染图片时写入
<image src="{{item.imgList[0]}}"></image>
然后这就渲染单个图片了,是你所需。
其二
如果我们事先不做任何处理。
我们在请求到时的点击事件进行获取
需求 a b页面 这边是a页面通过跳转到b页面把图片传递到b页面,
在b页面上进行渲染这些全部图片
PS 因为他的格式上面提到,所以进行切割变成字符串数组
这里是以逗号切割,因为逗号切割会显示一个空的元素在末尾
slice(0,-1)这个是去掉数组最后一个元素
A页面
//getdisease(e)这个是点击事件获取
getdisease(e){
let that=this; allpic=e.currentTarget.dataset.pic.split(',').slice(0,-1);
console.log(e.currentTarget.dataset.pic.split(',').slice(0,-1))
然后我们跳转把allpic传过去到b页面
wx.navigateTo({
url: '/packageD/pages/encyclopediadetails/encyclopediadetails?alllist='+alllist+'&allpic='+allpic,
});
B页面
b页面接收我们要看一下数据格式是不是我们想要的,
打印一下
很明显不是 使用我们还要处理
还要进行切割。
onLoad: function (options) {
var that = this;
if (options) {
this.setData({
diseasepic:options.allpic.split(','),
})
}
console.log(options.allpic.split(','))
},
然后我们要在页面把全部图片渲染上去
看下结构字符串数组—
这个时候要用到对象渲染https://blog.csdn.net/TxbLcy/article/details/106149544
对象渲染是键值 去值来渲染 如下所示
<swiper-item wx:for="{{diseasepic}}"
wx:for-item="value" wx:for-index="key class="heaser-img">
<image src='{{value}}'></image>
</swiper-item>