音乐小程序项目

2023-10-27

目录

一,开放前的准备

1,项目展示

 2,项目分析

        (1)音乐小程序项目页面结构图

         (2)音乐小程序项目目录结构

         (3)音乐小程序项目目录结构

3,项目初始化

二,标签页切换

 1,任务分析

2,前导知识 

(1)swiper组件编写滑动页面结构:

(2)swiper组件常用属性:

(3)swiper组件编写滑动页面结构:idex.wxml:

(4)swiper组件编写滑动页面结构index.wxss:

 3,编写页面结构和样式   

(1)音乐小程序基础页面和样式:

(2)音乐小程序基础页面和样式: 

         (3)音乐小程序基础页面和样式:

(4)音乐小程序基础页面和样式-tab导航效果: 

(5)测试页面info.wxml、page.wxml、play.wxml文件

 4,实现标签页切换

       (1)单击导航栏选项卡实现标签页切换:

(2)通过滚动事件切换页面效果:

(3)通过滚动事件切换页面效果:

 三,音乐推荐

1,任务分析

2,前导知识

      (1)scroll-view组件的属性及说明:

      (2) scroll-view组件的属性及说明:

      (3)scroll-view组件事件对象:

      (4)scroll-view组件事件对象:

     (5)scroll-view组件事件对象参数分析:

     (6)image组件属性及说明:

    (7)image组件缩放模式-mode:

    (8) image组件9种裁剪模式-mode:

   (9)image组件缩放模式和裁剪模式测试:

 3,内容区域滚动

 4,轮播图

 5,功能按钮

6,热门音乐

(1)flex布局实现页面布局:pages/index/info.wxml

(2)index页面底部播放

  四,播放器 1,任务分析

(1)播放器标签页结构图:

 (2)播放器的具体功能进行分析:

 2,前导知识

(1)audioCtx对象声明的方式:

(3)音频API接口的属性及说明:

 (4)音频API接口的方法及说明:

 (5)innerAudioContext案例使用:

(6)slider组件属性及说明

(7)slider组件的使用:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

音乐小程序项目 的相关文章

  • php curl集成包的安装和实用

    下载curl集成包 https github com php mod curl 放在vendor目录下 加载curl包 实例化 vendor Curl src Curl Curl php pinJ new Curl 然后按照官网demo使用
  • 图像配准的方法

    转自 http blog sina com cn s blog 4b9b714a0100d5k5 html 图像配准的方法 1 基于特征的图像配准 基于特征的图像配准首先提取图像信息的特征 然后以这些特征为模型进行配准 特征提取的结果是一含
  • QT的ui文件中控件在cpp的调用

    点击然后右键 然后点击改变对象名称 改成如上图所示 即可在cpp函数中调用 进行操作
  • cdn搭建原理_什么叫cdn服务器?怎么部署?

    在现今的网络系统时期 各类互连网手机app异军突起 而互联网出現浏览卡屏或延时的状况也越来越非常广泛 以便处理不一样的互联网情况 人们常常会构建到不一样的虚拟主机来浏览互联网 cdn服务器也是列举这种 什么叫cdn服务器 cdn服务器英语全
  • CentOS7.x安装VNC实录

    不知不觉 centos已经到7 6了 在服务器操作系统中 centos是用的比较多的 占很大的比例 由于7 x版本和6 x版本有区别 最近安装了7 6的VNC 特记之 VNC需要系统安装的有桌面 如果是生产环境服务器 安装时使用的最小化安装
  • 学妹问我:OpenJDK是什么?作为师哥,必须万字详解屁颠屁颠奉上

    上一篇是分享的是 JVM虚拟机 了解Java堆中对象分配 布局和访问的全过程 这篇给大家分享 OpenJDK 1 OpenJDK 概述 OpenJDK 是 Java 平台标准版 Java SE 的免费开源实现 这是 Sun Microsys

随机推荐

  • python爬虫安装Xpath插件时遇到的问题

    在安装Xpath时 出现拖拉压缩包 记住一定是压缩包 下载后的插件是 crx后缀的文件 需要改变为压缩包的形式 后 在添加文件时 一直找不到压缩包 最后发现是压缩包后缀的问题 如图 是我的winr 压缩包软件 自动生成的压缩包 默认是rar
  • 数据聚合与分组运算

    标注 我用的是jupyterNotebook 一 分组与聚合的原理 在Pandas中 分组是指使用特定的条件将原数据划分为多个组 聚合在这里指的是 对每个分组中的数据执行某些操作 最后将计算的结果进行整合 分组与聚合的过程大概分为以下三步
  • nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet

    问题描述 这个报错指的是结果无法映射 只需要把java实体与数据库表关系映射好就ok 一定要看清自己的配置文件 自己的数据库 处理思路整理 避免走弯路 1 首先验证是不是代码写出 String sql select count 1 from
  • Spring中@Autowired注解用法详解

    1 概述 Spring中IOC可以通过注解方式实现 只要在spring的配置文件applicationContext xml中配置开启了包扫描Spring会自动扫描指定包及其子孙包
  • 【Python三大结构练习2】

    目录 1 数字金额转换为中文大写金额 2 恺撒密码 3 大小写转换 1 数字金额转换为中文大写金额 描述 编写一函数 将数字金额转换为中文大写金额 设最高位考虑到亿 最低位考虑到分 如 数字金额为1023 445 转换为中文大写金额为 壹仟
  • tp6整合腾讯云cos上传

    1 创建一个名为 composer json的文件 内容如下 require qcloud cos sdk v5 gt 2 0 2 执行以下命令 使用 Composer 安装 php composer update 3 复制代码 我这里目录
  • Qt编写并且调用外部动态库(dll)

    一 利用Qt编写一个简单的动态库 利用Qt编写一个简单的动态库 里面含有加 减 乘 除四个函数接口 1 打开Qt 新建一个项目 选择Library C 库 然后点击确认 2 选择共享库 写入项目名称 我这里命名为 QtMathDLL 选择项
  • Java 多线程批量操作中如何做事务控制?

    老汉聊技术 2023 04 11 12 43 发表于四川 收录于合集 java42个 编程63个 上方蓝色 老汉聊技术 选择 设为星标 前言 公司业务中遇到一个需求 需要同时修改最多约5万条数据 而且还不支持批量或异步修改操作 于是只能写个
  • 启动Redis报错:Could not create Server TCP listening socket *:6379: bind: Address already in use–解决办法

    最后一句提示 6379地址已经在使用 6379是redis默认的端口 如图我自己输入指令 redis server 显示Redis已经开启服务 1 正常解决方法三部 通过指令找到redis进程 查看所有关于它的进程详情 ps ef grep
  • Harbor-私有docker仓库离线安装配置

    因为工作需要 有时候是需要完全断网环境 此时需要在内网环境中离线安装Harbor私有仓库 1 系统环境描述 主机 X86 64架构 8G内存 期待啥时候等有机会找一台国产化机器安装一个其他架构的版本 操作系统 CentOS 7 9 2009
  • Python爬虫进阶:实战案例与技巧详解

    导言 Python作为一种强大的编程语言 在网络爬虫开发中发挥着重要作用 除了基本的爬虫技巧外 还有许多高级的爬虫技术可以帮助我们更好地获取和处理数据 本篇文章将结合实际案例 介绍Python爬虫的进阶技巧 并提供相应的代码示例 帮助读者深
  • 练习一、用JS语言计算两点之间距离功能

    功能描述 在界面建立4个数字输入框分别代表两点的横坐标 纵坐标 点击按钮并计算出相应的距离 主要考点 熟悉math对象中开根号math sqrt 数值 与平方math pow 数值 次幂 框架 elementui 相关代码
  • Netty学习——整体架构

    Netty 整体结构 Netty 是一个设计非常用心的网络基础组件 Netty 官网给出了有关 Netty 的整体功能模块结构 却没有其他更多的解释 从图中 我们可以清晰地看出 Netty 结构一共分为三个模块 Core 核心层 Core
  • Coverity介绍以及典型缺陷说明

    Coverity概述 Coverity公司是由一流的斯坦福大学的科学家于2002年成立的 产品核心技术是1998年至2002年在斯坦福大学计算机系统实验室开发的 用于解决一个计算机科学领域最困难的问题 在2003年发布了第一个能够帮助Lin
  • 一元多项式相加可实现代码数据结构(C语言)

    一元多项式相加可实现代码 c语言 数据结构 C语言版 书上是伪代码 经过不断修改调试 写下可实现的C语言源代码 创建文件 分为两部分 头文件 Poly h 和源文件 Poly c 一 实验目的 1 了解一元多项式的表示 2 实现一元多项式的
  • python使用influxdb-client管理InfluxDB的bucket

    bucket的概念类似数据库的 库 同时每个库中的数据都因为存在 时间戳 每个数据都会有一个对应的时间点 influxdb client python官方github页面 https github com influxdata influx
  • termux基本使用教程[通俗易懂]

    初始化 下载并初始化termux 安装vim 安装编辑器vim pkg install vim 解决中文乱码问题 在home目录下 新建 vimrc文件 vim vimrc 添加内容如下 set fileencodings utf 8 gb
  • 华为机试题67-24点游戏算法

    描述 给出4个1 10的数字 通过加减乘除运算 得到数字为24就算胜利 除法指实数除法运算 运算符仅允许出现在两个数字之间 本题对数字选取顺序无要求 但每个数字仅允许使用一次 且需考虑括号运算 此题允许数字重复 如3 3 4 4为合法输入
  • flex实现简单计算机程序,Macromedia Flex 制作计算器源码和制作步骤

    这个计算器是由两个部分组成 一个前台界面的MXML文件 一个后台控制器的AS文件 mxml文件负责显示计算器的界面 as文件负责处理用户发送的信息并计算结果 在这个教程中我们主要学习 list The Application class T
  • 音乐小程序项目

    目录 一 开放前的准备 1 项目展示 2 项目分析 1 音乐小程序项目页面结构图 2 音乐小程序项目目录结构 3 音乐小程序项目目录结构 3 项目初始化 二 标签页切换 1 任务分析 2 前导知识 1 swiper组件编写滑动页面结构 2