仿uc新闻列表源码分享

<template>  
    <view class="body">   
        <view class="tabbar" >  
            <view class="tabbarlist"  >   
                <view class="tab">  
                    <text>推荐</text>  
                </view>  
                <view class="tab">  
                    <text>财经</text>  
                </view>  
                <view class="tab">  
                    <text>科技</text>  
                </view>  
                <view class="tab">  
                    <text>娱乐</text>  
                </view>   
            </view>  
        </view>  
<!-- 数据是第三方的，如果自己的数据最好加一个type，通过type来分类排版，以下我是通过作者判断实现的 更多源码请加群 UniApp开源技术群 757988036 -->  
        <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="[(value.author_name)=='36氪的朋友们' ? 'uni-media-list-logo':'listhide']"  :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 :class="[(value.author_name)=='全媒派' ? 'listhide':'']">{{value.author_name}}</text>  
                            <text :class="[(value.author_name)=='36氪的朋友们' ? '':'listhide']" >{{value.published_at}}</text>  
                            <image  :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']"  :src="value.cover"></image>  
                            <image  :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']"  :src="value.cover"></image>  
                            <image  :class="[(value.author_name)=='全媒派' ? 'list3':'listhide']"  :src="value.cover"></image>  
                        </view>  
                    </view>  
                    <image   :class="[(value.author_name)!=='36氪的朋友们' && (value.author_name)!=='全媒派'  ? 'uni-media-list-logo':'listhide']"  :src="value.cover"></image>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
    var dateUtils = require('../../../common/util.js').dateUtils;    
    export default {  
        data() {  

            return {   
                listData: [],  
                last_id: "",  
                reload: false  

            }  
        },  
        onLoad() {   
            this.getList();  
        },  
        onPullDownRefresh() {  
            this.reload = true;  
            this.last_id = "";   
            this.getList();  
        },  
        onReachBottom() {  
            this.getList();  
        },  
        methods: {   
            getList() {  
                var data = {  
                    column: "id,post_id,title,author_name,cover,published_at" //需要的字段名  
                };  
                if (this.last_id) { //说明已有数据，目前处于上拉加载  
                    data.minId = this.last_id;  
                    data.time = new Date().getTime() + "";  
                    data.pageSize = 10;  
                }  
                uni.request({  
                    url: 'https://unidemo.dcloud.net.cn/api/news',  
                    data: data,  
                    success: (data) => {  
                        if (data.statusCode == 200) {  
                            let list = this.setTime(data.data);  
                            this.listData = this.reload ? list : this.listData.concat(list);  
                            this.last_id = list[list.length - 1].id;  
                            this.reload = false;  
                        }  
                    },  
                    fail: (data, code) => {  
                        console.log('fail' + JSON.stringify(data));  
                    }  
                })  
            },  
            goDetail: function (e) {  
//              if (!/前|刚刚/.test(e.published_at)) {  
//                  e.published_at = dateUtils.format(e.published_at);  
//              }  
                let detail = {  
                    author_name: e.author_name,  
                    cover: e.cover,  
                    id: e.id,  
                    post_id: e.post_id,  
                    published_at: e.published_at,  
                    title: e.title  
                }  
                uni.navigateTo({  
                    url: "../list2detail-detail/list2detail-detail?detailDate=" + encodeURIComponent(JSON.stringify(detail))  
                })  
            },  
            setTime: function (items) {  
                var newItems = [];  
                items.forEach((e) => {  
                    newItems.push({  
                        author_name: e.author_name,  
                        cover: e.cover,  
                        id: e.id,  
                        post_id: e.post_id,  
                        published_at: dateUtils.format(e.published_at),  
                        title: e.title  
                    });  
                });  
                return newItems;  
            }  
        },  
    }  
</script>  
</script>  
<style>  
.tabbar{width: 100%;height: 100upx; /* border-top: solid #eee 1upx; */    }  
.tabbarlist{width: 100%;height: 100upx;position: fixed;background:#ffffff; z-index: 999999;border-bottom: solid #eee 1upx; }  
.tabbarlist .tab{width: 20%;height: 100upx;/* background: #007AFF; */float: left;display: block;text-align: center;line-height: 100upx;color: #000;}  
.listhide{display: none;}  
.listshow{display: block;}  
.list3{height: 140upx;margin-left: 4upx;}  
.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>

uniapp开源网http://uniapp.red 欢迎 uniapp开源技术群 757988036
演示地址：http://wx1.sinaimg.cn/mw690/0060lm7Tly1fyapsl1l03j30k00qojtn.jpg