【uniapp】使用接口数据渲染来代替静态数组的写法

 使用for循环渲染出一排盒子,数据为模拟数据:

<template>
    <view class="someList" v-for="(item, index) in fiveList">

				<text>{
   
   {item.name}}</text>
                <text>{
   
   {item.image}}</text>			
    </view>
</template>

<script>
    export default{
        data(){
            return{

              	fiveList: [{
						imgs: '/images/new1.png',
						text: '示例1',
							
					},
					{
						imgs: '/images/new2.png',
						text: '示例2',
				
					},
					{
						imgs: '/images/new3.png',
						text: '示例3',
					}

				],
            }
        }
    }

</script>

调用接口,使用真实数据,只需要一个空数组来接受回参res即可,比如我们需要在页面加载时就开始渲染数据:


		onShow() {
		

			//主页加载时调用接口获取数据并渲染

			const data = {

                //接口入参
				custom_app_key: 'appKey',
               // session_3rd: getStorage("session"), // 微信信息标识
			}
			GetProject(data).then(res => {

				console.log("成功")
                //赋值数组参数,替换静态数组
				this.fiveList = res

				console.log(res);

			}).catch(res => {

				console.log("失败");

			})

}

使用时依旧可以插值语法,例如 { {item.name}}的形式来渲染。

猜你喜欢

转载自blog.csdn.net/ONLYSRY/article/details/127754242