“小程序:弹性布局案例”的版本间的差异
来自CloudWiki
(→再又再再再改进代码) |
|||
(未显示同一用户的2个中间版本) | |||
第1行: | 第1行: | ||
− | == | + | ===弹性布局:组件的嵌套=== |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
给组件添加了内容: | 给组件添加了内容: | ||
第33行: | 第19行: | ||
</view></nowiki> | </view></nowiki> | ||
− | == | + | ===弹性布局:组件的修饰=== |
为组件添加了样式: | 为组件添加了样式: | ||
第76行: | 第62行: | ||
} | } | ||
</nowiki> | </nowiki> | ||
− | == | + | |
+ | ===弹性布局:设置元素居中=== | ||
用Flex布局设置元素居中: | 用Flex布局设置元素居中: | ||
第100行: | 第87行: | ||
}</nowiki> | }</nowiki> | ||
− | == | + | ===弹性布局:组件的修饰(二)=== |
+ | 修饰文章标题: | ||
+ | |||
<nowiki> | <nowiki> | ||
<text class="post-title">2020LPL夏季赛季后赛观赛指南</text></nowiki> | <text class="post-title">2020LPL夏季赛季后赛观赛指南</text></nowiki> | ||
第112行: | 第101行: | ||
}</nowiki> | }</nowiki> | ||
− | + | 修饰图片和文字: | |
+ | |||
<nowiki> | <nowiki> | ||
<image class="post-image" src=" /images/lpl.png"></image> | <image class="post-image" src=" /images/lpl.png"></image> | ||
第131行: | 第121行: | ||
}</nowiki> | }</nowiki> | ||
− | == | + | ===弹性布局:组件的水平排列=== |
+ | |||
<nowiki> | <nowiki> | ||
<view class="post-like"> | <view class="post-like"> | ||
第159行: | 第150行: | ||
} | } | ||
</nowiki> | </nowiki> | ||
+ | |||
+ | ====补充:png图片==== | ||
+ | 小程序图标不建议采用png图片,原因有二: | ||
+ | |||
+ | *不方便改大小 | ||
+ | *不方便改颜色 |
2021年4月29日 (四) 11:31的最新版本
弹性布局:组件的嵌套
给组件添加了内容:
<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>
弹性布局:组件的修饰
为组件添加了样式:
wxml:
<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>
wxss:
.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; }
弹性布局:设置元素居中
用Flex布局设置元素居中:
- display:flex;
- flex-direction: row;
- align-items:center;
.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; }
弹性布局:组件的修饰(二)
修饰文章标题:
<text class="post-title">2020LPL夏季赛季后赛观赛指南</text>
WXSS:
.post-title{ font-size: 34rpx;font-weight: 600; margin-bottom: 20rpx; margin-left: 20rpx; }
修饰图片和文字:
<image class="post-image" src=" /images/lpl.png"></image> <text class="post-content">8月9号,LPL常规赛收官之战结束,在事关</text>
WXSS:
.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; }
弹性布局:组件的水平排列
<view class="post-like"> <image class="post-like-image" src=" /images/icon/chat.png"></image> <text class="post-like-font">02</text> <image class="post-like-image" src=" /images/icon/view.png"></image> <text class="post-like-font">100</text> </view>
wxss:
.post-like{ display: flex; flex-direction: row; align-items: center; margin-left: 20rpx; } .post-like-image{ height : 32rpx; width: 32rpx; margin-right : 16rpx; } .post-like-font{ margin-right: 40rpx; font-size: 26rpx; }
补充:png图片
小程序图标不建议采用png图片,原因有二:
- 不方便改大小
- 不方便改颜色