uni-app里面使用uni.request請求并且渲染列表

1：新建一個(gè)uniapp項(xiàng)目价认，命名為test抡笼。

2：官方網(wǎng)站找文檔开睡，要用到列表組件

地址導(dǎo)航：https://ext.dcloud.net.cn/plugin?id=24
導(dǎo)入到自己的test項(xiàng)目里面去

導(dǎo)入之后跛梗，可以看到目錄結(jié)構(gòu)如下

3：打開index弊琴，開始寫代碼

使用方式列表的方式，在 script 中引用組件并且在 template 中使用組件膳汪。

import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
    components: {uniList,uniListItem}
}

index代碼寫好了參考如下：

<template>
    <view>  
    <!-- 帶描述信息 -->
    <uni-list>      
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    <uni-list>
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    <uni-list>
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {uniList,uniListItem}
    }   
</script>
<style>
</style>

4：運(yùn)行到瀏覽器

點(diǎn)擊運(yùn)行的菜單唯蝶，運(yùn)行到chrom瀏覽器里面。

運(yùn)行成功遗嗽，顯示的界面效果，這個(gè)是靜態(tài)的鼓蜒。

5：準(zhǔn)備一個(gè)可以使用的接口

找了一個(gè)可以使用的接口痹换，網(wǎng)上有很多免費(fèi)的api接口，但是很多免費(fèi)的接口都容易被攻擊都弹，很容易失效娇豫，在使用之前，請先點(diǎn)擊去查看一下畅厢，接口是否是完整的冯痢。

接口地址：https://unidemo.dcloud.net.cn/api/news

6：開始寫請求

這里是請求使用的一個(gè)方法uni.request(OBJECT)：官方文檔放在這里：https://uniapp.dcloud.io/api/request/request
官網(wǎng)的例子是這樣的

示例

uni.request({
    url: 'https://www.example.com/request', //僅為示例，并非真實(shí)接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定義請求頭信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

我們可以直接復(fù)制浦楣，放到自己的代碼里面袖肥，并且把url修改成我上一步準(zhǔn)備的接口數(shù)據(jù)。

index.vue代碼如下

<template>
    <view>  
    <uni-list>      
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    <uni-list>
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    <uni-list>
        <uni-list-item title="標(biāo)題文字" note="描述信息"></uni-list-item>       
    </uni-list>
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {uniList,uniListItem},
        data() {
            return {
                // productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {          
            getList() {         
                uni.request({
                    url: "https://unidemo.dcloud.net.cn/api/news",                  
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        // this.productList = res.data;
                    },                  
                });
            },
        }
    }   
</script>
<style>
</style>

寫完代碼之后振劳，打開我們的控制臺(tái)椎组，可以看到請求的免費(fèi)的api里面的數(shù)據(jù)，是請求成功了的历恐，在請求成功的success方法里面寸癌，寫一個(gè)console.log(res.data)，將數(shù)據(jù)打印在控制臺(tái)方便查看弱贼。

7：開始賦值蒸苇，渲染到前端界面

這個(gè)時(shí)候的步驟就不多說了，大家都非常的清楚吮旅，在data()里面定義一個(gè)空數(shù)組填渠，將請求到的res.data賦值給空數(shù)組，然后進(jìn)到view里面進(jìn)行遍歷鸟辅，渲染數(shù)據(jù)到頁面氛什。

參考代碼;

<template>
    <view>  
    <uni-list  v-for="(item,index) in productList" :key="index">        
        <uni-list-item :title="item.author_name"  :note="item.title"></uni-list-item>            
    </uni-list>
    
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {uniList,uniListItem},
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {          
            getList() {         
                uni.request({
                    url: "https://unidemo.dcloud.net.cn/api/news",                  
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.productList = res.data;
                    },                  
                });
            },
        }
    }   
</script>
<style>
</style>

效果就可以出來了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者