<template><view class="content"><view class="uni-list"><!--这是图片轮播的--><swiper :indicator-dots="true"  :autoplay="true" :interval="3000" :duration="500"><swiper-item v-for="item in top_stories " :key="item" @tap="openinfo" :data-newsid="item.id"><image :src="item.images" style="width: 100%;"></image></swiper-item></swiper><text>今日热闻</text><!--这是列表信息--><view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index" @tap="openinfo":data-newsid="item.id"><view class="uni-media-list"><image class="uni-media-list-logo" :src="item.images"></image><view class="uni-media-list-body"><view class="uni-media-list-text-top">{{item.title}}</view></view></view></view></view></view>
</template><script>export default {data() {return {list: [],top_stories: []};},onLoad: function() {uni.request({url: 'https://news-at.zhihu.com/api/4/news/latest',method: 'GET',success: res => {this.list = res.data.stories;this.top_stories = res.data.stories;},fail: () => {},complete: () => {}});},methods: {openinfo(e) {var newsid = e.currentTarget.dataset.newsid;uni.navigateTo({url: '../info/info?newsid=' + newsid,});},}}
</script><style>.uni-media-list-body {height: auto;}.uni-media-list-text-top {line-height: 1.6em;}
</style>

<template><view class="content"><view><image class="uni-media-list-logo" :src="imgage" style="width: 400px;height: 400px;"></image></view><view class="title">{{title}}</view><view class="art-content"><rich-text class="richText"  :nodes="strings"></rich-text></view></view>
</template><script>export default {data(){return{title:'',strings:'',imgage:''}    },onLoad:function(e){uni.request({url: 'http://news-at.zhihu.com/api/2/news/'+e.newsid,method: 'GET',data: {},success: res => {this.title=res.data.title;// 替换中文双引号this.strings=res.data.body.replace("type=“text/javascript”",'type="text/javascript"');this.imgage=res.data.image;},fail: () => {},complete: () => {}});}}</script><style>
.content{padding: 10upx 2%; width: 96;flex-wrap: wrap;}
.title{line-height: 2em;font-weight: 700;font-size: 38upx;}
.art-content{line-height: 2e}
.uni-media-list-logo{width: 400px;height: 400px;}
</style>