小程序-新闻列表页

<template>
	<view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(v,k) in arr">
				<view class="swiper-item uni-bg-blue">
					<image :src="v.url" style="width:100%"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view>
			<view class="post-container">
				<view class="post-author-date">
					<image class="post-author" src="../../static/avatar/5.png"></image>
					<text class="post-date">2021/6/2 14:00</text>
				</view>
				<image class="post-image" src="../../static/post/bl.png"></image>
				<text class="post-content">深圳市地方金融监管局对部分融资担保公司进行监管约谈</text>
				<view class="post-like">
					<image class="post-like-image" src="../../static/icon/chat.png"></image>
					 <text class="post-like-font">12</text>
					 <image class="post-like-image" src="../../static/icon/view.png"></image>
					<text class="post-like-font">321</text>
				</view>
			</view>
			
			<view class="post-container">
				<view class="post-author-date">
					<image class="post-author" src="../../static/avatar/3.png"></image>
					<text class="post-date">2021/6/2 14:00</text>
				</view>
				<image class="post-image" src="../../static/post/2.jpg"></image>
				<text class="post-content">老白干酒2020年又“白干”</text>
				<view class="post-like">
					<image class="post-like-image" src="../../static/icon/chat.png"></image>
					 <text class="post-like-font">12</text>
					 <image class="post-like-image" src="../../static/icon/view.png"></image>
					<text class="post-like-font">321</text>
				</view>
			</view>
			<view class="post-container">
				<view class="post-author-date">
					<image class="post-author" src="../../static/avatar/1.png"></image>
					<text class="post-date">2021/6/2 14:00</text>
				</view>
				<image class="post-image" src="../../static/post/1.jpg"></image>
				<text class="post-content">“三孩政策”发布，哪些赛道将受益？</text>
				<view class="post-like">
					<image class="post-like-image" src="../../static/icon/chat.png"></image>
					 <text class="post-like-font">12</text>
					 <image class="post-like-image" src="../../static/icon/view.png"></image>
					<text class="post-like-font">321</text>
				</view>
			</view>
		</view>
	</view>
</template>

　　

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				arr:[]
			}
		},
		onLoad() {
			uni.request({
				url:'http://www.blog1904a.com/api/banner/list',
				method:'GET',
				dataType:'json',
				success: (res) => {
					//console.log(res);
					this.arr = res.data.data;
				}
			})
		},
		methods: {
		
		}
	}
</script>

　　

<style>
    swiper{
      width:100%;
      height:460rpx
    }
    
    swiper image{
      width:100%;
      height:460rpx
    }
    .post-container{
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      background-color: #fff;
      border-top:1px solid #ededed;
      border-bottom:1px solid #ededed;
      padding-bottom: 10rpx;
    }
    
    .post-author-date{
      /* margin-top:10rpx;
      margin-bottom: 20rpx;
      margin-left: 10rpx; */
      margin: 10rpx 0 20rpx 10rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .post-author{
      width:60rpx;
      height:60rpx;
      /* vertical-align: middle; */
    }
    
    .post-date{
      margin-left:20rpx;
      font-size: 26rpx;
      /* vertical-align: middle; */
    }
    
    .post-title{
      font-size: 34rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
      margin-left: 20rpx;
      color:#333;
    }
    
    .post-image{
      width: 100%;
      height:340rpx;
      margin-bottom: 30rpx;
    }
    
    .post-content{
      color: #666;
      font-size:28rpx;
      margin-bottom: 20rpx;
      margin-left:20rpx;
      line-height: 40rpx;
      letter-spacing: 2rpx;
    }
    
    .post-like{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left:20rpx;
    }
    
    .post-like-image{
      height:32rpx;
      width:32rpx;
      margin-right:16rpx;
    }
    /* html */
    .post-like-font{
      margin-right: 20rpx;
      font-size:13rpx;
    }    
</style>