1.0yangche/components/news/list/list.vue

<template>
	<view class="wrap">
		<view class="header">
		    <view v-for="item,index in allData.type" :key="index" @tap="changeActive(item,index)" :class="['header_item',current == index?'current':'']">{{item.name}}
				<view class="line"></view>
		    </view>
		</view>
		<view class="list">
		    <view v-for="item,index in allData.detail" :key="index" class="list_item" @tap="toDetail(item)">
				<view class="news_title">{{item.name}}</view>
				<view :class="['image','clear',item.imgs.length == 1?'one':'no_one']">
					<image v-for="item,index in item.imgs" :key="index" :src="url + item"></image>
				</view>
				<view class="news_tag clear">
					<view class="news_tag_lf">{{item.tag}} <view class="list_ban" v-if="item.isAd == 1">广告</view></view>
					<view class="news_tag_rg">{{item.date}}</view>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import api from "../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				url:app.globalData.url,
				current:0,//导航栏默认选中
				id:'',//导航栏对应查询id
				allData:null,
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				api.getNewsList().then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//切换查询数据
			getItem(){
				let data = {
					typeId:this.id
				}
				api.getNewsItem(data).then((res)=>{
					// console.log(res);
					this.allData.detail = res.data.data.detail;
				})
			},
			//导航栏点击
			changeActive(item,index){
				this.current = index;
				this.id = item.id;
				this.getItem();
			},
			//跳转详情
			toDetail(item){
				uni.navigateTo({
					url:"/components/news/detail/detail?id=" + item.id
				})
			}
		}
	}
</script>

<style scoped>
	.clear:after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.header{
	  width:100%;
	  height:86rpx;
	  line-height: 86rpx;
	  border-top:1px solid #f2f2f2;
	  border-bottom:1px solid #f2f2f2;
	  display: flex;
	}
	.header_item{
	  flex: 1;
	  font-size: 30rpx;
	  color:#222222;
	  text-align: center;
	  position: relative;
	}
	.line{
	  width:38rpx;
	  height:4rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  bottom:0rpx;
	  left:50%;
	  transform: translateX(-50%);
	  display: none;
	}
	.current{
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  color:transparent;
	  font-size: 34rpx;
	  font-weight: bold;
	}
	.active .line{
	  display: block;
	}
	.list{
	  width:100%;
	  overflow: hidden;
	  padding:0 30rpx 100rpx;
	  box-sizing: border-box;
	}
	.list_item{
	  width:100%;
	  padding-bottom: 26rpx;
	  border-bottom:1px solid #f2f2f2;
	}
	.news_title{
	  font-size: 32rpx;
	  color:#2a2a2a;
	  margin:22rpx 0 14rpx 0;
	}
	.one image{
	  display: block;
	  width:100%;
	  height:380rpx;
	}
	.no_one image{
	  display: block;
	  width:218rpx;
	  height:144rpx;
	  margin-right: 18rpx;
	  float:left;
	}
	.no_one image:last-child{
	  margin-right: 0;
	}
	.news_tag{
	  width:100%;
	  margin-top:12rpx;
	  font-size: 24rpx;
	  color:#999999;
	}
	.news_tag_lf{
	  float:left;
	}
	.news_tag_rg{
	  float:right;
	}
	.list_ban{
	  display: inline-block;
	  font-size:24rpx;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  color:transparent;
	  margin-left: 10rpx;
	}
</style>