9.4 资讯列表 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.4 资讯列表

本小节主要讲解资讯列表页面的制作，效果如图9-12。

布局分析：我们在“企业站首页-最新资讯”这里分析过类似的布局，我们可以沿用前面的布局和样式；唯一需要变动的是讲区块标题右侧的内容删除。

布局代码如下：

<template>
	<view>
		<!--最新资讯--区块标题-->
		<view class='qukuai'>
		  <view class='qukuai-shuxian'></view><!--区块标题-左侧竖线-->
		  <text class='qukuai-biaoti'>最新资讯</text><!--区块标题-中间文字-->
		  <navigator class='qukuai-gengduo' url=''></navigator><!--区块标题-右侧删除内容-->
		</view>
		<!--最新资讯-开始-->
		<navigator class='zixun'><!--每条资讯信息 1行2列：左侧资讯标题，右侧图标-->
		  <text class='zixun_biaoti'>2021年春节公司放假通知</text><!--左侧资讯标题-->
		  <image src='/static/tupian/right.png' class='zixun_tubiao'></image><!--右侧图标-->
		</navigator>
		<navigator class='zixun'>
		  <text class='zixun_biaoti'>2020年2月上班延迟通知，随时更新</text><!--左侧资讯标题-->
		  <image src='/static/tupian/right.png' class='zixun_tubiao'></image><!--右侧图标-->
		</navigator>
		<navigator class='zixun'>
		  <text class='zixun_biaoti'>2020年春节祝贺大家新春愉快</text><!--左侧资讯标题-->
		  <image src='/static/tupian/right.png' class='zixun_tubiao'></image><!--右侧图标-->
		</navigator>
		<navigator class='zixun'>
		  <text class='zixun_biaoti'>2020年春节放假通知</text><!--左侧资讯标题-->
		  <image src='/static/tupian/right.png' class='zixun_tubiao'></image><!--右侧图标-->
		</navigator>
		<navigator class='zixun'>
		  <text class='zixun_biaoti'>2020年夜饭时间，请大家准时参加</text><!--左侧资讯标题-->
		  <image src='/static/tupian/right.png' class='zixun_tubiao'></image><!--右侧图标-->
		</navigator><!--最新资讯-结束-->
	</view>
</template>

样式代码如下：

<style>
/*区块标题，整体样式*/
.qukuai {
  display: flex;   /*Flex布局*/
  margin: 2px;     /*外边距*/
  background-color: aliceblue; /*背景颜色*/
  align-items: center; /*垂直居中*/
}
/*区块标题 左侧竖线样式*/
.qukuai-shuxian {
  width: 3px;   /*宽度*/
  height: 15px; /*高度*/
  background-color: green; /*背景颜色*/
  margin: 5px; /*外边距*/
  box-shadow: 2px 2px 2px gainsboro; /*阴影*/
}
/*区块标题 中间文字样式*/
.qukuai-biaoti {
  color: gray;/*字体颜色*/
  text-shadow: 2px 2px 2px gainsboro;/*字体阴影*/
  flex: 1;           /*占据所有剩余空间*/
  margin-left: 1px;  /*左侧外边距*/
  align-self: center;/*垂直居中*/
}
/*区块标题 右侧文字样式*/
.qukuai-gengduo {
  color: gray; /*字体颜色*/
  text-shadow: 2px 2px 2px gainsboro;/*字体阴影*/
}

/*最新资讯：1行2列*/
.zixun {/*每条资讯的总体样式*/
  display: flex;/*Flex布局*/
  border-bottom: 1px solid gainsboro;/*每条资讯的下划线*/
}
.zixun_biaoti {/*资讯左侧标题*/
  font-size: 14px;
  flex-grow: 1; /*占据所有剩余空间*/
  padding: 10px; /*内边距*/
  align-items: center; /*垂直居中*/
}
.zixun_tubiao {/*资讯右侧图标*/
  width: 16px; /*宽度*/
  height: 16px;/*高度*/
  align-self: center;/*居中*/
}
</style>

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/