微信小程序 模仿华为音乐 列表界面

微信小程序 模仿华为音乐 列表界面

index.js

var app=getApp();
var listDatas = require("../../data/data_list.js");
Page({
  data: {
    expertList: [],
    expertList2:[],
    title:"歌单推荐",
    title2: "电台精选",
    title3: "新歌",
    xindie_title:"新碟",
    data_list_xindie:[]
  },

  onLoad: function () {
    var that = this;
    // console.log(listDatas.data_list_xindie)
    that.setData({
      expertList: listDatas.listdata,
      expertList2: listDatas.listdata2,
      data_list_xindie: listDatas.data_list_xindie,
    })
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {

  },
})

index.wxml

<import src="../compontents/list_6.wxml" />

<!-- 歌单推荐 -->
<template is="list_6_1" data="{{expertList,title}}"></template>

<!-- 新歌 -->
<!-- <template is="list_3_1" data="{{data_list_xindie,xindie_title}}"></template> -->


<!-- 电台精选 -->
<!-- <template is="list_6_2" data="{{expertList2,title2}}"></template> -->

<!-- 新歌 -->
<template is="list_3_1" data="{{data_list_xindie,xindie_title}}"></template>

<view style='height:100rpx;'></view>

引入wxss样式

@import "../compontents/list_6.wxss";

模板代码：

<template name="list_6_1">
  <view class='component-wrap'>
    <view class='title'>
      <view class='left-title'>{{title}}</view>
      <navigator class='right-title'>更多 > </navigator>
    </view>
    <view class='content'>
      <view class='content-3'>
        <block wx:for="{{expertList}}" wx:key="*this">
          <view class='list'>
            <view class='image'>
              <image class='image-src' mode='aspectFill' src='{{item.img_url}}'></image>
            </view>
            <view class='img-title'>{{item.img_name}}</view>
          </view>
        </block>
        <view class='clear-float'></view>
      </view>
    </view>
  </view>
</template>

<template name="list_6_2">
  <view class='component-wrap'>
    <view class='title'>
      <view class='left-title'>{{title2}}</view>
      <navigator class='right-title'>更多 > </navigator>
    </view>
    <view class='content'>
      <view class='content-3'>
        <block wx:for="{{expertList2}}" wx:key="*this">
          <view class='list'>
            <view class='image'>
              <image class='image-src' mode='aspectFill' src='{{item.img_url}}'></image>
            </view>
            <view class='img-title'>{{item.img_name}}</view>
          </view>
        </block>
        <view class='clear-float'></view>
      </view>
    </view>
  </view>
</template>

<!-- 横三排列表 -->
<template name="list_3_1">
  <view class='xindie-wrap'>
    <view class='title'>
      <view class='left-title3'>{{xindie_title}}</view>
      <navigator class='right-title3'>更多 > </navigator>
    </view>
    <view class='content-wrap'>
      <view class='content3'>
        <block wx:for="{{data_list_xindie}}" wx:key="*this">
          <view class='list3' style='background-color: {{item.img_background}}'>
            <view class='image3'>
              <image class='image-src3' mode='aspectFill' src='{{item.img_url}}'></image>
            </view>
            <view class='img-title3'>{{item.img_name}}</view>
            <view class='img-sub-title3'>{{item.img_author}}</view>
          </view>
        </block>
        <view class='clear-float'></view>
      </view>
    </view>
  </view>
</template>

模板wxss样式代码：

/* pages/compontents/list_6.wxss */

.component-wrap{
  width: 96%;
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 30rpx;
}

.title{
  width: 100%;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.left-title{
  margin-left: 10rpx;
  font-size: 30rpx;
  color: rgb(15, 15, 15);
  font-weight: bold;
}

.right-title{
  margin-right: 10rpx;
  font-size: 24rpx;
  color: rgb(131, 131, 131);
  padding: 8rpx 12rpx 8rpx 12rpx;
  border-radius: 8rpx;
}

.content-3{
  width: 100%;
}

.list{
  float: left;
  width: 31%;
  margin-right: 1%;
  margin-left: 1%;
  margin-top: 26rpx;
}

.image-src{
  width: 224rpx;
  height: 224rpx; 
  border-radius: 12rpx;  
}
.img-title{
  width: 100%;
  font-size: 24rpx;
  margin-left: 3rpx;
  margin-right: 3rpx;
}

.clear-float{
  clear: both;
}

.xindie-wrap{
  margin-top: 30rpx;
}

.content-wrap{
   width: 96%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 20rpx;
}

.content3{
  margin-left: 1rpx;
}

.left-title3{
  margin-left: 22rpx;
  font-size: 30rpx;
  color: rgb(15, 15, 15);
  font-weight: bold;
}

.right-title3{
  margin-right: 28rpx;
  font-size: 24rpx;
  color: rgb(131, 131, 131);
  padding: 8rpx 12rpx 8rpx 12rpx;
  border-radius: 8rpx;
}

.list3{
  float: left;
  width: 31%;
  border-radius: 10rpx;
  margin-right: 1%;
  margin-left: 1%;
}

.image-src3{
  width: 224rpx;
  height: 224rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
}

.img-title3{
   font-size: 28rpx;
   margin-left: 12rpx;
}

.img-sub-title3{
   font-size: 24rpx;
   color: rgb(156, 151, 151);
   margin-left: 12rpx;
   padding-bottom: 12rpx;
}

.img-sub-title{
  font-size: 20rpx;
  color: rgb(131, 127, 127);
}

模仿后台请求数据：

data_list.js

var data_list = [ //假数据
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/3.jpg",
    img_name:"本周热歌：N.Flying超好听",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/4.jpg",
    img_name: "他们说这些歌评论应该配上10000+",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/5.jpg",
    img_name: "放过我！我妈以为我多动症发作了",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/6.jpg",
    img_name: "本周热歌：N.Flying超好听",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/7.jpg",
    img_name: "放过我！我妈以为我多动症发作了",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat2/8.jpg",
    img_name: "选歌偏执症之给点治愈系就灿烂",
  }
];
var data_list2 = [ //假数据
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/1.png",
    img_name: "通达智慧必修：每天听《论语》",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/2.png",
    img_name: "上官文露名著精读【第一季】",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/3.png",
    img_name: "即兴表达，张口就说，让你把握",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/4.png",
    img_name: "我点你听",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/5.png",
    img_name: "明朝那些事儿（全集）",
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/6.png",
    img_name: "蛇女",
  }
]

var data_list_xindie = [ //假数据
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/1.png",
    img_name: "丘比特点赞",
    img_author: "牛奶咖啡",
    img_background:"rgb(185, 226, 170);"

  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/2.png",
    img_name: "每分每秒",
    img_author:"曲肖冰",
    img_background: "rgb(185, 226, 70)"
  },
  {
    id: "12313",
    img_url: "http://pdunza77c.bkt.clouddn.com/wechat/3.png",
    img_name: "愿意为你去冒险",
    img_author: "摩登兄弟刘宇宁",
    img_background: "rgb(125, 206, 170)"
  }
]

module.exports = {
  listdata: data_list,
  listdata2: data_list2,
  data_list_xindie: data_list_xindie
}