uni-app新手調用api接口制作圖文列表

制作圖文列表

<template>
     <view class="content">
         <view class="page-section indexListBox">
            <view class="indexList" v-for="(item , index) in homePosts" :key="index">
                <view class="title">{{item.title}}</view>
                <view v-html="item.content"></view>
            </view>
        </view>
    </view>
</template>

樣式與數據接口

<style>
    .indexList uni-image {
            width: 100%;
            height: 130px;
            background: #eaeaea;
        }
        .indexList {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .indexList .title {
            background: #000;
            color: #fff;
            font-size: 16px;
            line-height: 37px;
            padding: 0 10px;
            margin-top: -5px;
    }
       .indexListBox{
           margin-top: 20px;
       }
</style>

<script>
     export default {
            data() {
                return {
                   homePosts:[],
                }
            },
             onLoad() {
                         //教程 uni-app:渲染app的首頁文章數據第一步:將該方法加入onLoad中，使頁面一加載的時候就獲取文章列表
                         this.getHomePosts();
                     },
            methods:{
                getHomePosts(){
                    var _self = this;
                    uni.request({
                        url: 'http://192.168.1.156:10086/smart-admin-api/article/page/list',//接口地址
                        header: {
                          'content-type': 'application/x-www-form-urlencoded',  //自定義請求頭信息
                        },
                        success: (res) => {
                            // 請求成功之后將文章列表數據賦值給homePosts
                            _self.homePosts=res.data.data.list;//根據API數據找到對應的集合
                        }
                    });
                }
            }
      
        }
</script>

渲染數據完整代碼示例

<template>
     <view class="content">
         <view class="page-section indexListBox">
            <view class="indexList" v-for="(item , index) in homePosts" :key="index">
                <view class="title">{{item.title}}</view>
                <view v-html="item.content"></view>
            </view>
        </view>
    </view>
</template>
<style>
    .indexList uni-image {
            width: 100%;
            height: 130px;
            background: #eaeaea;
        }
        .indexList {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .indexList .title {
            background: #000;
            color: #fff;
            font-size: 16px;
            line-height: 37px;
            padding: 0 10px;
            margin-top: -5px;
    }
       .indexListBox{
           margin-top: 20px;
       }
</style>
<script>
     export default {
            data() {
                return {
                   homePosts:[],
                }
            },
             onLoad() {
                         //教程 uni-app:渲染app的首頁文章數據第一步:將該方法加入onLoad中，使頁面一加載的時候就獲取文章列表
                         this.getHomePosts();
                     },
            methods:{
                getHomePosts(){
                    var _self = this;
                    uni.request({
                        url: 'http://192.168.1.156:10086/smart-admin-api/article/page/list',//接口地址
                        header: {
                          'content-type': 'application/x-www-form-urlencoded',  //自定義請求頭信息
                        },
                        success: (res) => {
                            // 請求成功之后將文章列表數據賦值給homePosts
                            _self.homePosts=res.data.data.list;//根據API數據找到對應的集合
                        }
                    });
                }
            }
      
        }
</script>