查看“小程序:弹性布局案例”的源代码
←
小程序:弹性布局案例
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==初始代码== <nowiki> <view> <view> <image></image> <text></text> </view> <text></text> <image></image> <text></text> <view></view> </view> </nowiki> ==改进代码== 给组件添加了内容: <nowiki> <view> <view> <image src=" /images/avatar/3.png"></image> <text>Nov 18 2020</text> </view> <text>2020LPL夏季赛季后赛观赛指南</text> <image src=" /images/lpl.png"></image> <text>8月9号,LPL常规赛收官之战结束,在事关</text> <view> <image src=" /images/icon/chat.png"></image> <text>92</text> <image src=" /images/icon/view.png"></image> <text>102</text> </view> </view></nowiki> ==再改进代码== 为组件添加了样式: wxml: <nowiki> <view class="post-container"> <view class="post-author-date"> <image class="post-author" src=" /images/avatar/3.png"></image> <text class="post-date">Nov 18 2020</text> </view> <text>2020LPL夏季赛季后赛观赛指南</text> <image src=" /images/lpl.png"></image> <text>8月9号,LPL常规赛收官之战结束,在事关</text> <view> <image src=" /images/icon/chat.png"></image> <text></text> <image src=" /images/icon/view.png"></image> <text></text> </view> </view></nowiki> wxss: <nowiki> .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; } .post-author{ width:60rpx;height:60rpx; vertical-align: middle; } </nowiki> ==再又改进代码== 用Flex布局设置元素居中: *display:flex; *flex-direction: row; *align-items:center; <nowiki> .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; }</nowiki> ==再又再改进代码== <nowiki> <text class="post-title">2020LPL夏季赛季后赛观赛指南</text></nowiki> WXSS: <nowiki> .post-title{ font-size: 34rpx;font-weight: 600; margin-bottom: 20rpx; margin-left: 20rpx; }</nowiki> ==再又再再改进代码== <nowiki> <image class="post-image" src=" /images/lpl.png"></image> <text class="post-content">8月9号,LPL常规赛收官之战结束,在事关</text></nowiki> WXSS: <nowiki> .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; }</nowiki>
返回至
小程序:弹性布局案例
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息