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

来自CloudWiki
跳转至: 导航搜索
 
(未显示同一用户的8个中间版本)
第1行: 第1行:
==初始代码==
+
===弹性布局:组件的嵌套===
<nowiki>
+
给组件添加了内容:
    <view>
 
        <view>
 
            <image></image>
 
            <text></text>
 
        </view>
 
        <text></text>
 
        <image></image>
 
        <text></text>
 
        <view></view>
 
    </view>
 
</nowiki>
 
  
==改进代码==
 
 
  <nowiki>
 
  <nowiki>
 
<view>
 
<view>
第31行: 第19行:
 
     </view></nowiki>
 
     </view></nowiki>
  
==再改进代码==
+
===弹性布局:组件的修饰===
 +
为组件添加了样式:
 +
 
 
wxml:
 
wxml:
  
 
  <nowiki>
 
  <nowiki>
 
<view class="post-container">
 
<view class="post-container">
         <view>
+
         <view class="post-author-date">
             <image src=" /images/avatar/3.png"></image>
+
             <image class="post-author" src=" /images/avatar/3.png"></image>
             <text>Nov 18 2020</text>
+
             <text class="post-date">Nov 18 2020</text>
 
         </view>
 
         </view>
 
         <text>2020LPL夏季赛季后赛观赛指南</text>
 
         <text>2020LPL夏季赛季后赛观赛指南</text>
第62行: 第52行:
 
   border-bottom: 1px solid#ededed;
 
   border-bottom: 1px solid#ededed;
 
   padding-bottom: 10rpx;
 
   padding-bottom: 10rpx;
}</nowiki>
+
}
 +
.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>
 +
 
 +
===弹性布局:组件的水平排列===
 +
 
 +
<nowiki>
 +
        <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></nowiki>
 +
 
 +
wxss:
 +
 
 +
<nowiki>
 +
  .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;
 +
  }
 +
</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图片,原因有二:

  • 不方便改大小
  • 不方便改颜色