“小程序:弹性布局案例”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
第30行: 第30行:
 
         </view>
 
         </view>
 
     </view></nowiki>
 
     </view></nowiki>
 +
 +
==再改进代码==
 +
wxml:
 +
 +
<nowiki>
 +
<view class="post-container">
 +
        <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></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;
 +
}</nowiki>

2021年4月26日 (一) 15:03的版本

初始代码

    <view>
        <view>
            <image></image>
            <text></text>
        </view>
        <text></text>
        <image></image>
        <text></text>
        <view></view>
    </view>

改进代码

<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>
            <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></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;
}