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"
}
♪(^∇^*)♪(^∇^*)(~ ̄▽ ̄)~有没有感觉很棒呀!!!(#^.^#),(*^▽^*)O(∩_∩)O哈哈~