<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> 演示地址：http://wx1.sinaimg.cn/mw690/0060lm7Tly1fyapsl1l03j30k00qojtn.jpg