脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序页面布局

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

 更新时间：2020年12月11日 14:25:19   作者：The pure land  
这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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
      })
    }
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Bootstrap Table使用方法详解

    Bootstrap Table使用方法详解

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 详解JS中的快速排序与冒泡

    详解JS中的快速排序与冒泡

    本文主要介绍了快速排序思想与冒泡排序思想。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    这篇文章主要介绍了JS表格组件神器bootstrap table，bootstrap table界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端，需要了解更多bootstrap table的朋友可以参考下
    2015-12-12
  • MSN消息提示类

    MSN消息提示类

    MSN消息提示类...
    2006-09-09
  • js 性能优化之算法和流程控制

    js 性能优化之算法和流程控制

    循环处理是最常见的编程模式之一，也是提升性能必须关注的要点之一。本文将对此进行介绍。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript 放大镜 移动镜片效果代码

    JavaScript 放大镜 移动镜片效果代码

    JavaScript 放大镜是我成为前端后写的第一个组件, 从中学到了很多东西. 现在已经过去超过半年, 我希望能在自己仍有印象的时候, 整理和重新思考其中的一些处理方法, 将它改进, 并将这些想法写出来
    2011-05-05
  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    本例将实现这样的一个效果：下拉到一定距离后按钮才显示出来，鼠标放到按钮上时，按钮背景会变成灰色，并且图标变成了文字。点击按钮缓慢回到顶部
    2014-04-04
  • js 跨域和ajax 跨域问题小结

    js 跨域和ajax 跨域问题小结

    大家都知道js是不能跨域的，但我们有时候就要这么用，怎么办呢？办法总是有的.
    2009-07-07
  • 微信小程序位置授权处理方法

    微信小程序位置授权处理方法

    这篇文章主要给大家介绍了关于微信小程序位置授权处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • highlight.js 代码高亮插件的使用详解

    highlight.js 代码高亮插件的使用详解

    在网页使用过程中，经常会用到代码的展示。代码高亮可以直观的了解代码，本文主要介绍了highlight.js 代码高亮插件的使用详解，具有一定的参考价值，感兴趣的可以了解一下
    2022-01-01

最新评论