【无标题】

音乐播放器

<view class="tab-item{{tab==2?'active':''}}" bind:tap="changeItem" data-item="2"></view>设置tab的值

tab-item {{tab==0?'active':''}}

注意空格哈,否则没有效果

swiper滚动

内容里面滚动

<scroll-view scroll-x scroll-y="true" style="height: 200px;">

<view style="height: 400px; background-color: aqua;">12121212</view>

</scroll-view>

注意

swiper轮播图,横向纵向,scroll-x/y,事件bindscoll

scoll确定里面比外面大

内容超出屏幕

slider组件--滑动选择器]拖动

现在 1我们加入最小值最大值

2注意show-value="true"

e.detail.value就是我们现在的值

<include>标签

包含的页面

背景音乐

 app.json里面

"requiredBackgroundModes": ["audio", "location"],

 onReady() {
        var audio=wx.getBackgroundAudioManager()
        audio.onPlay(function(){console.log("开始播放")})
        audio.title='音乐标题'
        audio.src='http://127.0.0.1:3000/1.mp3'
    },

---

index界面:每个界面都有的东西

上,导航栏

内容

下,播放底

changeItem点我的导航栏,改变页面

<!-- 导航栏内容显示 -->

<view class="tab">

    <!-- changeItem点我的导航栏,改变页面 -->

<view class="tab-item {{tab==0?'active':''}}" bind:tap="changeItem" data-item="0">音乐推荐</view>

<view class="tab-item {{tab==1?'active':''}}" bind:tap="changeItem" data-item="1">播放器</view>

<view class="tab-item {{tab==2?'active':''}}" bind:tap="changeItem" data-item="2">播放列表</view>

</view>

滑动就会改变导航栏

<!-- 设置我左右滑动的页面 -->include 

!-- 设置我左右滑动的页面 -->

<view class="content">

<!-- 滑动就会改变导航栏 -->

<!-- swiper-item -->

<swiper current="{{item}}" bindchange="changeTab">

<swiper-item><include src="info.wxml"></include></swiper-item>

<swiper-item><include src="play.wxml"></include></swiper-item>

<swiper-item><include src="playlist.wxml"></include></swiper-item>

</swiper>

三个页面设置

 info界面

1.  <scroll-view scroll-y="true" class="content-info">设置页面可以上下滚动,把整个页面包起来,几乎每个页面都要
2. 设置轮播点颜色

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>

<!-- 横向轮播图 -->

<swiper-item>

    <image src="/pages/images/banner.jpg"></image>

</swiper-item>

<swiper-item>

    <image src="/pages/images/banner.jpg"></image>

</swiper-item>

<swiper-item>

    <image src="/pages/images/banner.jpg"></image>

</swiper-item>

</swiper>

3.三个按钮排行 

推荐的六个歌曲

 play界面

标题,图片旋转,时间轴

 playlist界面

用for循环都显示出来,每次播放一个小方框

 值有什么用

data-item设置一个索引让别人来访问,