1：新建两个vue界面，list列表页，details详情页

2：打开pages.json，配置新增页面的路径等信息

{
        "path": "pages/main/list",
        "style": {
            "navigationBarTitleText": "新闻列表"
        }
    },
    {
        "path": "pages/main/details",
        "style": {
            "navigationBarTitleText": "详情"
        }
    },

3：开始写list界面代码，主要讲json数据渲染在前端列表，前面有说过，很简单的，然后在通过goDetail的方法带参跳转到详情页。

<template>
    <view>
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="value.cover"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{ value.title }}</view>
                        <view class="uni-media-list-text-bottom">
                            <text>{{ value.author_name }}</text>
                            <text>{{ value.published_at }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    
    export default {
        data() {
            return {
                listData: [{
                        id: "109121",                       
                        title: "「粒子狂热」：被误解成潮牌的运动穿着品牌",
                        author_name: "徐子",
                        cover: "https://img.36krcdn.com/20191230/v2_37635ef22df24e96aa7f26e192036c2b_img_png",
                        published_at: "2019-12-30 15:20:00"
                    },
                    {
                        id: "109121",                       
                        title: "为什么12306时不时要崩那么一下？",
                        author_name: "半佛仙人",
                        cover: "https://img.36krcdn.com/20191230/v2_02c342a62f91498b99c7f2b5aa22ff1c_img_png",
                        published_at: "2019-12-30 15:22:00"
                    },
                    {
                        id: "109121",
                        title: "「倒闭、被坑、降薪、失业，2019我为什么还在坚持",
                        author_name: "燃财经",
                        cover: "https://img.36krcdn.com/20191230/v2_43cbd298bed24a18bd023802258f20c8_img_png",
                        published_at: "2019-12-30 15:26:00"
                    },
                    {
                        id: "109121",
                        title: "钱太好花了：想存五万还差八万，今年你攒到钱了吗",
                        author_name: "36氪的朋友们",
                        cover: "https://img.36krcdn.com/20191230/v2_037f7f799f504a60a848b52fa913ab65_img_png",
                        published_at: "2019-12-30 15:29:00"
                    }
                ],
            };
        },
        onLoad() {
        },
        methods: {
            goDetail: function(e) {
                let detail = {
                    author_name: e.author_name,
                    cover: e.cover,
                    id: e.id,
                    
                    published_at: e.published_at,
                    title: e.title
                };
                uni.navigateTo({
                    url: 'details?detailDate=' + encodeURIComponent(JSON.stringify(detail))
                });
            },
        }
    };
</script>
<style>
    .uni-media-list-logo {
        width: 180upx;
        height: 140upx;
    }

    .uni-media-list-body {
        height: auto;
        justify-content: space-around;
    }

    .uni-media-list-text-top {
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
    }

    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>

4：再写一下details页面代码

<template>
    <view>
        <view class="banner">
            <image class="banner-img" :src="banner.cover"></image>
            <view class="banner-title">{{banner.title}}</view>
        </view>
        <view class="article-meta">
            <text class="article-author">{{banner.author_name}}</text>
            <text class="article-text">发表于</text>
            <text class="article-time">{{banner.published_at}}</text>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        onLoad(event) {
            console.log(event);
            this.banner = JSON.parse(decodeURIComponent(event.detailDate));
            //详情标题
            uni.setNavigationBarTitle({
                title: this.banner.title
            });
        },
        methods: {
        }
    }
</script>
<style>
    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }
    .banner-img {
        width: 100%;
    }
    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 30upx;
        bottom: 30upx;
        width: 90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }
</style>

效果：