微信小程序-flex案例

微信小程序-flex案例

开始

案例效果

案例效果图

案例需求

  1. 使用flex弹性布局
  2. 有滚动条

页面结构

wxml

<!-- index.wxml -->
<view class="container">
  <!-- 标签栏的页签 固定高度 -->
  <view class="top">
    <view class="item active">
      <text>个性推荐</text>
    </view>
    <view class="item">
      <text>歌单</text>
    </view>
    <view class="item">
      <text>主播电台</text>
    </view>
    <view class="item">
      <text>排行榜</text>
    </view>
  </view>
  <!-- 内容区域 高度自适应 -->
  <scroll-view class="content" scroll-y>
    <view class="slide">
      <image src="../../images/slide.png" />
    </view>
    <view class="portals">
      <view class="item">
        <image src="../../images/04.png" />
        <text>私人FM</text>
      </view>
      <view class="item">
        <image src="../../images/05.png" />
        <text>每日歌曲推荐</text>
      </view>
      <view class="item">
        <image src="../../images/06.png" />
        <text>云音乐新歌榜</text>
      </view>
    </view>
    <view class="list">
      <text class="title">推荐歌单</text>
      <view class="inner">
      <view class="item">
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人是谁?</text>
      </view>
      <view class="item">
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人</text>
      </view>
      <view class="item"> 
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人是谁?</text>
      </view>
      <view class="item">
        <image src="../../images/poster.jpg" />
        <text>一生中最爱的人</text>
      </view>
    </view>
    </view>
    
  </scroll-view>
  <!-- 播放控制条 固定高度 -->
  <view class="bottom">
    <view class="poster">
      <image src="../../images/poster.jpg"></image>
    </view>
    <view class="info">
      <text class="title">一生中最爱</text>
      <text>谭咏麟</text>
    </view>
    <view class="controls">
      <image src="../../images/01.png" />
      <image src="../../images/02.png" />
      <image src="../../images/03.png" />
    </view>
  </view>
</view>

wxss

/**index.wxss**/
page {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: space-between; */
  /* box-sizing: border-box; */
}

.top {
  background-color: rgb(10, 10, 10);
  display: flex;
  color: white;
  font-size: 14px;
}

.top .item {
  padding: 5px 0;
  flex: 1;
  text-align: center;
}

.top .item.active {
  color: #ccc;
  border-bottom: 1px solid salmon;
}

.content {
  flex: 1;
  background-color: #111214;
  color: #ccc;
  /* 微信小程序不支持这么做有插件 */
  overflow: hidden;
  /* overflow: scroll; */
}

.slide image {
  width: 100%;
  height: 130px;
}

.portals {
  display: flex;
  margin-bottom: 15px;
}

.portals .item {
  flex: 1;
}

.portals .item image {
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}

.portals .item text {
  font-size: 12px;
  display: block;
  text-align: center;
}

.list .title {
  margin: 5px 10px;
  font-size: 14px;
}

.list .inner {
  display: flex;
  flex-wrap: wrap;
}
.list .inner .item{
  width: 33.3333%;
}

.inner .item image {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}


.inner .item text {
 font-size: 14px;
}
.bottom {
  display: flex;
  height: 50px;
  background-color: #17181a;
}

.bottom .poster image {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.info {
  flex: 1;
  color: #888;
  font-size: 14px;
}

.info .title {
  display: block;
  font-size: 16px;
  color: #ccc;
}

.controls image {
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}

总结

  • flex使用:给父元素display:flex;flex-direction:row; 表示主轴侧轴方向
    1. flex-wrap:wrap; 表示多余的下一行(换行) ,如果一行要三个设置宽度为33.33333%
    2. flex:1; 除去固定宽度,其余的变成自适应
    3. scroll-view 滚动条标签
    4. flex-direction 属性:通过设置坐标轴,来设置项目排列方向。
    5. justify-content 属性:设置项目在主轴方向上对齐方式,以及分配项目之间及其周围多余的空间。
    6. align-items 属性:设置项目在行中的对齐方式。
    7. align-content 属性:多行排列时,设置行在交叉轴方向上的对齐方式,以及分配行之间及其周围多余的空间。

这篇文章有 6 个评论

发表评论