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

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
}

微信小程序模仿华为音乐列表界面相关推荐

微信小程序网易云音乐播放界面
微信小程序网易云效果图 HTML JS CSS 效果图 HTML <view class="box"><view class ...
微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
【调试模式】微信小程序和华为开发板通信
文章目录开发环境开发板UDP接口 UDP服务器创建流程开启UDP服务器完整代码(不含LED部分) 相关函数说明微信UDP客户端创建流程 UDP客户端完整代码(不含LED部分) 效果图参考资料 ...
微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类
<微信小程序模仿开眼视频app(一)--视频首页.视频详情.分类> <微信小程序模仿开眼视频app(二)--搜索功能> 可到我的github账号上去copy文件瀑布流部分文 ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
微信小程序好看的输入信息界面——发送验证码倒计时
微信小程序好看的输入信息界面简介输入个人信息界面,录入个人信息等都可以使用到这个界面: 1.输入信息的布局界面 2.选择大陆还是港澳台的手机号码 3.输入手机号码, 4.获取验证码的60S倒计时, ...

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

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

微信小程序模仿华为音乐列表界面相关推荐

最新文章

热门文章

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

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

微信小程序 模仿华为音乐 列表界面相关推荐

最新文章

热门文章

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

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

微信小程序模仿华为音乐列表界面相关推荐