微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

2024-02-03 14:20| 来源: 网络整理| 查看: 265

这里写目录标题一、自定义组件1. 制作自定义组件2. 使用自定义组件3. 组件动态数据二、排行榜的制作1. 静态搭建2. 获取排行榜动态数据三、内网穿透（真机体验）四、tabBar（底部栏）的使用五、个人中心页面

一、自定义组件

官方文档自定义组件

1. 制作自定义组件

可以发现上面这个部分将在项目中重复使用，所有将其作为一个组件。

在这里插入图片描述首先将index页面文件夹里面的 wxml和wxss里面关于header的代码片段和样式复制到新建的conponent组件相应的文件里。

在这里插入图片描述

2. 使用自定义组件在page里面需要注册（在index.json文件的usingComponents添加注册）在这里插入图片描述

在这里插入图片描述

由于前面设置的滚动条太高了，所有需要设置一下这个容器的高度！

/* 推荐歌曲样式设置 */ .commmendContainer{ padding: 20rpx; height: 400rpx; }

完成组件的复用：在这里插入图片描述

3. 组件动态数据

需要根据不同的需要改变组件的显示内容

参考官方文档！

Navheader.wxml

{{title}} {{nav}} 查看更多

NavHeader.js

properties: { title:{ type:String, value:"title的默认值" }, nav:{ type:String, value:"nav的默认值" } },

index.wxml 里面的使用

在这里插入图片描述

二、排行榜的制作 1. 静态搭建

在这里插入图片描述

云音乐热歌榜 1 光辉岁月 2 海阔天空 3 真的爱你云音乐热歌榜 1 光辉岁月 2 海阔天空 3 真的爱你 /* 排行榜的样式*/ .topList{ padding: 20rpx; } .topListSwiper{ height: 400rpx; } .swiperItem{ width: 96%; background: #FBFBFB; } .swiperItem .title{ font-size: 30rpx; line-height: 80rpx; } .musicItem{ /* 当一个元素设置为flex，其子元素会自动成为block元素 */ display: flex; padding-bottom: 20rpx; } .musicItem image{ width: 100rpx; height: 100rpx; border-radius: 6rpx; } .musicItem .count{ width: 100rpx; height: 100rpx; text-align: center; line-height: 100rpx; } .musicItem .musicName{ height: 100rpx; line-height: 100rpx; /* 歌曲名过长时隐藏 */ max-width: 400rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 2. 获取排行榜动态数据

直接for循环

【本文地址】

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

今日新闻

推荐新闻

微信小程序【网易云音乐实战】（第三篇 自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

微信小程序【网易云音乐实战】（第三篇 自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

今日新闻

推荐新闻

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）