9.1.5 最新资讯
最新资讯区块效果如图9-6。
布局分析:每条资讯分1行2列,左侧放资讯标题,右侧放图标;左侧的资讯标题占据所有剩余空间,将右侧的图标挤压到最右侧。
布局代码如下:
<!--最新资讯--区块标题-->
<view class='qukuai'>
<view class='qukuai-shuxian'></view><!--区块标题-左侧竖线-->
<text class='qukuai-biaoti'>最新资讯</text><!--区块标题-中间文字-->
<navigator class='qukuai-gengduo' url=''>more></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><!--最新资讯-结束-->
样式代码如下:
<style>
/*最新资讯:1行2列*/
.zixun {/*每条资讯的总体样式*/
display: flex;/*Flex布局*/
border-bottom: 1px solid gainsboro;/*每条资讯的下划线*/
}
.zixun_biaoti {/*资讯左侧标题*/
flex-grow: 1; /*占据所有剩余空间*/
padding: 5px; /*内边距*/
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/