split把字符串分割成字符串数组（请求数据一个里面包括多条）

最新推荐文章于 2022-08-17 22:53:57 发布

小阳生煎

最新推荐文章于 2022-08-17 22:53:57 发布

阅读量702

点赞数

分类专栏： # JS

本文链接：https://blog.csdn.net/m0_53912016/article/details/117032642

版权

JS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

案例

在这里插入图片描述
刚开始请求未处理长成这样

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>