Mini programa WeChat Inicio rápido Experiencia de aprendizaje personal (1)
Documento oficial del mini programa WeChat
W3School
1. Use flex para completar el diseño del reproductor de música
1.1 Encabezado
Escribe index.json
{
"navigationBarTitleText": "Music Player",
"navigationBarBackgroundColor": "#333",
"navigationBarTextStyle": "white"
}
Luego, todo el reproductor se divide en páginas, dividido en barra de pestañas y parte de contenido, por lo que se necesitan dos contenedores secundarios y un contenedor principal.
Primero agregue la estructura básica en index.wxml:
<view class="root">
<!-- 标签栏 固定高度 -->
<view class="tabs">
</view>
<!-- 内容 自适应高度 -->
<view class="content">
</view>
</view>
Agrega estilos. La página es el cuadro exterior que viene con el subprograma, y es necesario establecer el ancho del cuadro interior para mostrar el estilo.
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;
}
Por supuesto, debemos controlar la altura de la barra de pestañas a través del contenido de la barra de pestañas, por lo que no es necesario establecerla en 50px.
Primero llene la barra de pestañas. Donde ** view class = "item active" **, esta parte significa que la etiqueta de vista tiene tanto item como elementos activos.
<!-- 标签栏 固定高度 -->
<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>
Modificando el estilo
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;
}
Agrega otro contenedor como barra de reproducción.
<!-- 播放条 -->
<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>
Escribe el estilo correspondiente. Entre ellos:
.controls image { width: 40px; height: 40px; margin: 5px; } se refiere al estilo de etiqueta de imagen en este estilo
.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;
}
Luego agregue elementos a la parte de contenido. Entre ellos: la
etiqueta de vista de desplazamiento aquí es la vista variable (desplazamiento) proporcionada por el subprograma WeChat, y scroll-y le permite desplazarse verticalmente
<!-- 内容 自适应高度 -->
<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>
Luego escriba estilos (todos los estilos finales): donde la
configuración aquí es overflow: hidden; no se muestra para su uso
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;
}
Hasta ahora, fin, cangrejos ~
(soy un principiante novato, no rocíes ~)