微信小程序实现音乐播放页面布局


Posted in Javascript onDecember 11, 2020

本文实例为大家分享了微信小程序实现音乐播放页面的布局,供大家参考,具体内容如下

1.效果图如下,点击播放按钮后,光碟转动,播放按钮变为暂停按钮;播放中点击暂停,光碟复位,暂停按钮恢复为播放按钮。

本文仅提供样式布局,其他具体响应不作介绍

微信小程序实现音乐播放页面布局

2.样式布局代码

wxml:

<view class="page_music">
  <view class='icon {{isPlay?"rotateAu":""}}' mode="widthFix">
   
  </view>
  <view class="tools">
    <view class="last" bindtap="last">
    </view>
    <view class='{{isPlay?"pause":"play"}}' bindtap="play">
    </view>
    <view class="next" bindtap="next">
    </view>
  </view>
  <view class="volume">
    <view class="volumeIcon">
    </view>
    <view class="sl">
    <slider min='0' max='10' step="1" value="0" bindchange="slide"/>
    </view>
  </view>
</view>

wxss:

.page_music{
  position: absolute;
  width: 100%;
  height: 80%;
}
.icon{
  position: relative;
  width: 500rpx;
  height: 500rpx;
  top:5%;
  left: 125rpx;
  background-image: url(""); /*放入光碟图片*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.tools{
  position: relative;
  width: 80%;
  height: 10%;
  top: 10%;
  left: 10%;
}
.last{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 0;
  top:0;
  background-image: url(""); /*放入上一首图标*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.play{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 42%;
  top:0;
  background-image: url(""); /*放入播放图标*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.pause{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 42%;
  top:0;
  background-image: url(""); /*放入暂停图标*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.next{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 0;
  top:0;
  background-image: url(""); /*放入下一首图标*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.volume{
  position: relative;
  width: 80%;
  height: 10%;
  top: 20%;
  left: 10%;
}
.volumeIcon{
  position: absolute;
  left: 0;
  width: 80rpx;
  height: 80rpx;
  top:0;
  background-image: url(""); /*放入音量图标*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.sl{
  position: absolute;
  right: 0;
  width: 80%;
  height: 100%;
  top: 0;
  background-image: url(""); /*放入滑动条背景图片*/
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background-position: center;
}
.rotateAu{
  animation: rotate 3s linear infinite;
 }
 @keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
 }

js:

Page({

  data:{
    isPlay:false,
  },
  play:function(e){
    if(this.data.isPlay==true)
    {
      this.setData({
        isPlay:false
      })
    }
    else
    {
      this.setData({
        isPlay:true
      })
    }
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 #Javascript
JS实现京东商品分类侧边栏
Dec 11 #Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
一行JavaScript代码如何实现瀑布流布局
Dec 11 #Javascript
react中hook介绍以及使用教程
Dec 11 #Javascript
js实现菜单跳转效果
Dec 11 #Javascript
You might like
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php报错502badgateway解决方法
2019/10/11 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
详解django三种文件下载方式
2018/04/06 Python
Django框架多表查询实例分析
2018/07/04 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Numpy之random函数使用学习
2019/01/29 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
委托书范文
2014/04/02 职场文书
电钳工人个人求职信
2014/05/10 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
老干部工作汇报材料
2014/10/28 职场文书