微信小程序新闻列表实现
1、打开开发者工具，在项目的pages文件夹下新建mypage文件夹，在文件夹内新建mypage页面，并在app.json中将mypage设为第一页面
2、在mypage.wxml中写代码如下，主要是布局整个页面，目前还比较简单
<view class='container'>
<block wx:for='{{news}}' wx:key='id'>
<view class='newsitem'>
<image src='{{item.imgurl}}' class='img'></image>
<view class='news-text'>
<text class='title'>{{item.title}}</text>
<view class= 'bottext'>
<text class='author'>{{item.author}}</text>
<text class='date'>{{item.date}}</text>
</view>
</view>
</view>
</block>
</view>
3、在mypage.wxss中写代码如下，为mypage.wxml添加样式：
.newsitem{
width: 95%;
height: 230rpx;
display: flex;
flex-direction: row;
margin: 10rpx;
border: 2rpx solid rebeccapurple
}
.img{
width: 200rpx;
height: 200rpx;
padding: 20rpx;
}
.news-text{
display: flex;
flex-direction: column;
padding: 20rpx;
}
.bottext{
width: 100%;
height: 200rpx;
display: flex;
align-items: flex-end;
font-size: 30rpx;
}
.author{
margin-right: 30rpx;
}
4、在mypage.js的data为页面添加数据，写代码如下：
data: {
news:[{
id:1,
title:'第一条新闻',
imgurl:'1.jpg',
author:'张三',
date:'2019-6-27 20:08'
},
{
id: 2,
title: '第二条新闻',
imgurl: '2.jpg',
author: '李四',
date: '2019-6-25 10:10'
}]
},
5、编译运行代码，左侧模拟器效果如下图
6、去掉边框，换一种显示风格，修改mypage.wxss代码如下：
.newsitem{
width: 95%;
height: 230rpx;
display: flex;
flex-direction: row;
margin: 10rpx;
border-bottom: 2rpx solid rebeccapurple
}
.img{
width: 200rpx;
height: 200rpx;
padding: 20rpx;
}
.news-text{
display: flex;
flex-direction: column;
padding: 20rpx;
}
.bottext{
width: 100%;
height: 200rpx;
display: flex;
align-items: flex-end;
font-size: 30rpx;
}
.author{
margin-right: 30rpx;
}
7、保存代码，左侧模拟器效果如下图，这边框的横线也可以用view实现，定义好高度颜色即可
