音乐小程序：列表渲染音乐表单

任务分析

音乐推荐是显示在content区域中的一个标签页，

其页面内容由三部分组成，分别是轮播图、功能按钮和热门音乐

注意：本文档用了列表渲染，和之前写死数据的方法不一样哦 ~

开发步骤

轮播图

JS

data: {
       img_lunbo:[
           '/images/banner.jpg',
           '/images/banner.jpg',
           '/images/banner.jpg'
       ]
    },

WXML

index.wxml:

<!--pages/music/index.wxml-->
<!--pages/info/index.wxml-->
<view>
     <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)"
     indicator-active-color="#fff" interval="3000" indicator-dots circular autoplay >
        <swiper-item wx:for="{{img_lunbo}}">
            <image src="{{item}}" />
        </swiper-item>
        
    </swiper>
</view>

index.wxss:

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20rpx;
}

.content-info-slide image {
  width: 100%;
  height: 100%;
}

功能按钮

js:

anniu:[
           {img:'/images/04.png',
            txt:'私人FM'
           },
           {img:'/images/05.png',
           txt:'每日歌曲推荐'
           },
           {img:'/images/06.png',
           txt:'云音乐新歌榜'
           }
       ]

wxml:

<view class="content-info-portal">
          <view wx:for="{{anniu}}">
            <image src="{{item.img}}" />
            <text>{{item.txt}}</text>
          </view>
        </view>

wxss:

/* 功能按钮 */

.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal > view {
  flex: 1;
  font-size: 30rpx;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

热门音乐

应用弹性布局，

需要编写弹性容器，和容器中的弹性子元素。

定义数据

index.js:

  data: {
     info:[
       {imgSrc:'/images/cover.jpg',
        title:'紫罗兰'
       },
       {imgSrc:'/images/cover.jpg',
        title:'青春之歌'
       },
       {imgSrc:'/images/cover.jpg',
       title:'朋友'
      },
    ]
  },

编写弹性容器

<view class="content-info-list">
          <view class="list-title">推荐歌曲</view>
          <view class="list-inner">
          </view>
</view>

编写大容器中的弹性子元素

wxml:

<!-- 热门音乐 -->
<view class="content-info-list">
  <view class="list-title">推荐歌曲</view>
  <view class="list-inner">
    <view class="list-item" wx:for="{{info}}" wx:key="*this">
      <image src="{{item.imgSrc}}" />
      <view>{{item.title}}</view>
    </view>
  </view>


</view>

wxss:

/* 热门音乐 */

.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}

效果图：

思考题：设置你的小程序首页