wx-一个简单页面

一个具有顶部，底部和中间的html页面，但没有js

<view class="root">

  <!-- 标签栏的页签 固定高度 -->

  <view class="tabs">

    <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>

    <swiper class="slide" autoplay indicator-dots>

      <swiper-item>

        <image src="../../images/slide.png"></image>

      </swiper-item>

      <swiper-item>

        <image src="../../images/slide.png"></image>

      </swiper-item>

      <swiper-item>

        <image src="../../images/slide.png"></image>

      </swiper-item>

    </swiper>

    <view class="portals">

      <view class="item">

        <image src="../../images/04.png"></image>

        <text>私人FM</text>

      </view>

      <view class="item">

        <image src="../../images/05.png"></image>

        <text>每日歌曲推荐</text>

      </view>

      <view class="item">

        <image src="../../images/06.png"></image>

        <text>云音乐新歌榜</text>

      </view>

    </view>

    <view class="list">

      <view class="title">

        <text>推荐歌单</text>

      </view>

      <view class="inner">

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

        <view class="item">

          <image src="../../images/poster.jpg"></image>

          <text>一生中最爱的是谁谁？</text>

        </view>

      </view>

    </view>

  </scroll-view>

  <!-- 播放控制条条 固定高度 -->

  <view class="player">

    <view class="poster">

      <image src="../../images/poster.jpg"></image>

    </view>

    <view class="info">

      <text class="title">一生中最爱</text>

      <text class="artist">谭咏麟</text>

    </view>

    <view class="controls">

      <image src="../../images/01.png"></image>

      <image src="../../images/02.png"></image>

      <image src="../../images/03.png"></image>

    </view>

  </view>

</view>

page {

  height: 100%;

}

.root {

  display: flex;

  flex-direction: column;

  height: 100%;

  background-color: #f0f0f0;

}

.tabs {

  display: flex;

  background-color: pink;

}

.tabs .item {

  flex: 1;

  text-align: center;

  font-size: 12px;

  background-color: #222;

  color: #ccc;

  padding: 8px 0;

}

.tabs .item.active {

  color: #fff;

  border-bottom: 2px solid #e9232c;

}

.content {

  flex: 1;

  background-color: #111214;

  color: #ccc;

  overflow: hidden;

}

.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 {

  display: block;

  font-size: 12px;

  text-align: center;

}

.list .title {

  margin: 5px 10px;

  font-size: 14px;

}

.list .inner {

  display: flex;

  flex-wrap: wrap;

}

.list .inner .item {

  width: 33.33333333%;

}

.list .inner .item image {

  display: block;

  width: 120px;

  height: 120px;

  margin: 0 auto;

}

.list .inner .item text {

  font-size: 14px;

}

.player {

  display: flex;

  height: 50px;

  background-color: #17181A;

}

.poster image {

  width: 40px;

  height: 40px;

  margin: 5px;

}

.info {

  flex: 1;

  color: #888;

  font-size: 14px;

  margin: 5px;

}

.info .title{

  display: block;

  font-size: 16px;

  color: #ccc;

}

.controls image {

  width: 40px;

  height: 40px;

  margin: 5px 2px;

}

可以改一下页面的固定样式部分

{

    "navigationBarTitleText": "Music Player",

    "navigationBarBackgroundColor": "#333",

    "navigationBarTextStyle": "white"

}

巴特西

wx-一个简单页面

一个具有顶部，底部和中间的html页面，但没有js

最新文章

热门文章