赞
踩
本节介绍音乐小程序的基础页面结构和样式:
<!--标签页标题-->
<view class="tab">
<view class="tab-item">音乐推荐</view>
<view class="tab-item">播放器</view>
<view class="tab-item">播放列表</view>
</view>
<!--内容区域-->
<view class="content">
</view>
<!--底部播放器-->
<view class="player"></view>
说明:
page{ display: flex; flex-direction: column; background: #17181a; color: #ccc; height: 100%; } .tab{ display: flex; } .tab-item{ flex: 1; font-size: 10pt; text-align: center; line-height: 72rpx; border-bottom: 6rpx solid #eee; } .content{ flex: 1; } .player{ background: #222; border-top: 1px solid #252525; height: 112rpx; }
说明:
<!--内容区域-->
<view class="content">
<swiper>
<swiper-item>
<include src="info.wxml"/>
</swiper-item>
<swiper-item>
<include src="play.wxml"/>
</swiper-item>
<swiper-item>
<include src="playlist.wxml"/>
</swiper-item>
</swiper>
</view>
<view style="background:#ccc;color:#000;height:100%">
info
</view>
<view style="background:#ddd;color:#000;height:100%">
play
</view>
<view style="background:#fff;color:#000;height:100%">
playlist
</view>
.content>swiper{
height: 100%;
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。