网易云音乐——Web学习day6

最新推荐文章于 2024-04-20 10:03:16 发布

「已注销」

最新推荐文章于 2024-04-20 10:03:16 发布

阅读量437

点赞数

分类专栏： Web集训2021 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44453019/article/details/120552012

版权

本文介绍了网易云音乐小程序的开发过程，包括项目需求、新建页面的方法、主页选项卡的设置、轮播图的实现与优化、搜索区域的设计、列表页的创建以及从列表页跳转到播放页面的逻辑，详细讲解了各个功能点的实现步骤。

摘要由CSDN通过智能技术生成

文章目录

项目需求
新建页面的两种方式
主页选项卡
- tabBar
轮播
- swiper
轮播优化
搜索区域
列表页
列表页数据展示
跳转到播放页面
- wx.navigateTo
- bindtap="play"

项目需求

在这里插入图片描述

新建页面的两种方式

1、直接在目录里对应的文件夹点击右键新建

2、在最外层app.json里找到pages{}创建

子页面必须在全局文件里面注册

"pages": [
    "pages/list/list",
    "pages/my/my"
  ],

主页选项卡

app.json设置主页栏

  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "络绎云音乐",
    "navigationBarTextStyle": "black"
  },

tabBar

功能：如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

为tabBar配置项添加list属性，注意tab列表最少2个，最多5个tab。

这里利用它来做最下方的页面跳转列表。

代码示例:

"tabBar": {
   
    "color": "#aaaaaa",  //文字颜色
    "selectedColor": "#2E87E4", //文字选中的颜色
    "backgroundColor": "#ddd", //tab背景色
    "borderStyle": "black", //tabBar上边框颜色
    "position": "top", //tabBar位置顶部top或底部bottom
     "list": [
          {
   
      "pagePath": "pages/list/list",//链接，无需加文件后缀（必填）
      "text":