使用Vue前端框架实现知乎日报app

使用Vue前端框架实现知乎日报app

 

 

这是：主页代码

<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>

图片演示：

转存失败重新上传取消

 

资源地址：https://github.com/nongzihong/uni_app_zhihuribao

 

 

 

 

 

 

 

 

posted @ 2018-11-26 16:02 梓鸿 阅读(...) 评论(...) 编辑 收藏