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

来自CloudWiki
跳转至： 导航， 搜索
第14行： 第14行：
  
 
==改进代码==
 
==改进代码==
 +
给组件添加了内容：
 +
 
  <nowiki>
 
  <nowiki>
 
<view>
 
<view>
第32行： 第34行：
  
 
==再改进代码==
 
==再改进代码==
 +
为组件添加了样式：
 +
 
wxml:
 
wxml:
  
第72行： 第76行：
 
   }
 
   }
 
   </nowiki>
 
   </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>

2021年4月27日 (二) 14:45的版本

初始代码

    <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 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;
  }
取自“http://www.openbrains.net/mediawiki/index.php?title=小程序:弹性布局案例&oldid=25872”