spilt:应用接口字符串转数组

最新推荐文章于 2024-10-01 23:46:18 发布

牛油的果

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量311

点赞数

分类专栏： uniapp 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_57633124/article/details/131376886

版权

uniapp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue.js应用中，通过split方法将一个包含多个图片地址的字符串分解成数组，然后利用这些图片数据生成轮播图的效果，主要涉及getcoopdetailList接口调用和Swiper组件的使用。

摘要由CSDN通过智能技术生成

1.split()：拆分字符串。通过指定分隔符对字符串进行切片，并返回分割后的字符串列表（list）

2.实际应用

2.1 接口如下

将imgs字符串转化成数组

methods: {
            //函数
			getgoods(){
                //选中id
				let coodId=this.cooId
				console.log('ssss')
                //将id赋值,传给后端
				let obj = {id:coodId}
				let selfThis = this
                //调用接口
				getcoopdetailList(obj).then(res=>{		
                    //获取其中数据			
					let goodsManage=res.data.data	
                    //获取其中图片	
					let images = goodsManage.imgs				
					console.log(images)
                    //使用split在,中分割
					let imageArry = images.split(',')
                    //将分割后的每一项放在bannnerArry中
					selfThis.bannerArry=imageArry
					selfThis.allArry=goodsManage
				}).catch(err=>{
				  console.log('ERROR')
				});
			
			},
		}

html部分(将上面获取的数组放在以下轮播图中,就可以实现效果啦)

<swiper class="imagebanner" circular :autoplay="false" >
	<view  v-for="(item,index) in bannerArry" :key="index">
		<swiper-item>
			<view class="bookbig">
               <image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="item" 
               mode=""></image>
			</view>
		</swiper-item>			
	</view>
</swiper>