微信小程序 模仿华为音乐 列表界面
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
}