向api请求数据，v-for渲染到页面，环境是 vue和uniapp

1、在onLoad生命周期里面，用unireq请求数据，得到整个数据列表
2、用console.log看整个列表到数据
3、在data里边“声明”一组数据
4、在onLoad生命周期里面，赋值使相关的对象数据更新
5、对象的属性代表新闻标题、发表时间等数据
6、用v-for循环读取对象的内容，用双括号把对象到属性写进相应的位置，写进url记得在src之前加冒号
到此完成数据的请求与展示
7、@tap绑定到openInfo方法
8、在方法里写uninav跳转打开新页面
9、data-newsid=“item。post——id”，向下一个页面传递newsid属性，它是将要获取的数据，所以叫做postid？
10、openInfo里边写I个参数e，这个e就是点击时触发事件获取到的对象，包括index等信息，console。log看它，找到newsId，把它赋值到newsId变量’
到此获取了下一个页面的动态参数newsId
11、拼url，e。newsId
12、获取新闻到详情，用另一个api借口加上那个动态参数，获取了新闻内容

<template>
    <view class="content">
    <view class="uni-list">         
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" 
        v-for="(item,index) in news" :key="index" 
        @tap="openInfo" 
        :data-newsid="item.post_id"
        >
        <!-- @表示绑定事件 等同于v-on，绑定一个点击事件，执行openInfo函数
         ：表示绑定数据 等同于v-bind
         :data-newsid="item.post_id" ，这句回头再看,应该是v-for的参数中有
         一个item，将每个新闻id绑定到列表中的一个项，data-newsid是。。。
         绑定一个data-newsid，列表中的每一项绑定一条新闻的意思
         data-newsid 表示传属性到openInfo函数里面
         先传这种属性到函数里面，然后在函数里面找新闻id
         在标签里写属性，可以向下一个页面传值
         -->
            <view class="uni-media-list">
                <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                <!-- 图标，来自api接口的数据结构 -->
                <view class="uni-media-list-body">
                    <view class="uni-media-list-text-top">{{item.title}}</view>
                    <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                </view>
                <!-- 标题和时间 -->
            </view>
        </view>
    </view>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                news:[]
            }
        },
        onLoad() {
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    console.log(res);
                    this.news = res.data;
                },
                // 将数据获取下来,请求成功的时候，参数是res，this。news就放在上面的v-for循环中
                fail: () => {},
                complete: () => {}
            }); 
        },
        methods: {
            openInfo(e){
                // e为通过请求获取到的数据，嗯，e就是onLoad请求到的东西，把它填到参数里
                console.log(e);
                var newsid = e.currentTarget.dataset.newsid;
                // currentTarget.dataset.newsid在console.log中找到
                // 找到这个newsid
                uni.navigateTo({
                    url: '../info/info?newsid='+newsid,                 
                });
                // 将newsid写入url
            }
        }
    }
</script>

<style>
.uni-media-list-body{
    height: auto;
    
}
.uni-media-list-text-top{
    line-height: 1.6em;
}
</style>

最后编辑于：2019.12.25 18:08:20