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>
效果：
