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.p运输机排名ng"></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"></i古代名言mage>          <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></vi冷幽默段子ew>

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

“`