WeChat Mini Program Quick Start Personal Learning Experience (1)
WeChat Mini Program Official Document
W3School
1. Use flex to complete the music player layout
1.1 Header
Write index.json
{
"navigationBarTitleText": "Music Player",
"navigationBarBackgroundColor": "#333",
"navigationBarTextStyle": "white"
}
Then the entire player is divided into pages, divided into tab bar and content part, so two child containers and one parent container are needed.
First add the basic structure in index.wxml:
<view class="root">
<!-- 标签栏 固定高度 -->
<view class="tabs">
</view>
<!-- 内容 自适应高度 -->
<view class="content">
</view>
</view>
Add styles. The page is the outer box that comes with the applet, and the width of the inner box needs to be set to display the style.
page{
height: 100%;
}
.root{
display: flex;
flex-direction: column;
height: 100%;
background-color: black;
}
.tabs{
height: 50px;
background-color: blanchedalmond;
}
.content{
flex: 1;
background-color: cornsilk;
}
Of course, we should control the height of the tab bar through the content of the tab bar, so there is no need to set it to 50px.
Fill the tab bar first. The **view class="item active"** part means that the view tag has both item and active elements.
<!-- 标签栏 固定高度 -->
<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>
Modifying the style
page{
height: 100%;
}
.root{
display: flex;
flex-direction: column;
height: 100%;
background-color: black;
}
.tabs{
display: flex;
background-color: black;
}
.content{
flex: 1;
background-color: black;
}
.tabs .item{
flex: 1;
text-align: center;
font-size: 12px;
color: #ccc;
/* 高度、宽度 */
padding: 8px 0 ;
}
/* tabs下的item同时还有active属性 */
.tabs .item.active{
color: #fff;
/* 红色下划线 */
border-bottom: 2px solid #e9232c;
}
Add another container as a play bar.
<!-- 播放条 -->
<view class="player">
<view class="poster">
<image src="../../image/poster.jpg"></image>
</view>
<view class="info">
<text class="title">一生中最爱</text>
<text class="artist">谭咏麟</text>
</view>
<view class="controls">
<image src="../../image/01.png"></image>
<image src="../../image/02.png"></image>
<image src="../../image/03.png"></image>
</view>
</view>
Write the corresponding style. Among them:
.controls image{ width: 40px; height: 40px; margin: 5px; } refers to the image tag style in this style
.player{
display: flex;
height: 50px;
background-color: black;
}
.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: #888;
}
.info{
flex: 1;
color: #888;
}
.controls image{
width: 40px;
height: 40px;
margin: 5px;
}
Then add elements to the content part. Among them: the
scroll-view tag here is the variable view (scrolling) provided by the WeChat applet, and scroll-y allows it to scroll vertically
<!-- 内容 自适应高度 -->
<scroll-view class="content" scroll-y>
<view class="slide">
<image src="../../image/slide.png"></image>
</view>
<view class="portals">
<view class="item">
<image src="../../image/04.png"></image>
<text>私人FM</text>
</view>
<view class="item">
<image src="../../image/05.png"></image>
<text>每日歌曲推荐</text>
</view>
<view class="item">
<image src="../../image/06.png"></image>
<text>云音乐新歌榜</text>
</view>
</view>
<view class="list">
<view class="title">
<text>推荐歌单</text>
</view>
<view class="inner">
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../image/poster.jpg"></image>
<text>一生中最爱的人</text>
</view>
</view>
</view>
</scroll-view>
Then write styles (all the final styles): where
set to overflow: hidden; is not displayed for use
page {
height: 100%;
}
.root {
display: flex;
flex-direction: column;
height: 100%;
background-color: black;
}
.tabs {
display: flex;
background-color: black;
}
.content {
flex: 1;
background-color: black;
color: #ccc;
overflow: hidden;
}
.tabs .item {
flex: 1;
text-align: center;
font-size: 12px;
color: #ccc;
padding: 8px 0;
}
/* tabs下的item同时还有active属性 */
.tabs .item.active {
color: #fff;
border-bottom: 2px solid #e9232c;
}
.player {
display: flex;
height: 50px;
background-color: black;
}
.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: #888;
}
.info {
flex: 1;
color: #888;
}
.controls image {
width: 40px;
height: 40px;
margin: 5px;
}
.slide image {
width: 100%;
height: 130px;
}
.portals {
display: flex;
}
.portals .item {
flex: 1;
margin-bottom: 15px;
}
.portals .item image {
width: 60px;
height: 60px;
display: block;
margin: 0 auto;
}
.portals .item text {
display: block;
font-size: 12px;
text-align: center;
}
.list .title{
margin: 5px 10px;
font: 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;
}
So far, over, crabs~
(I'm a novice beginner, don't spray~)