微信小程序音乐播放器页面渲染的方法
导读:本文共5291字符,通常情况下阅读需要18分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 页面渲染 为了解决这个问题,我们给图片添加一个渐变的遮罩,就像图10-8那样,这样到达文字部分时,背景就变成了黑色,不会影响文字的显示,而且达到了由图片到底下列表颜色渐变的效果,非常美观。 这个效果主要靠我们的格式文件实现,我们先写我们熟悉的部分。.list-top { position: relative; height: 100%;}.... ...
目录
(为您整理了一些要点),点击可以直达。- (2):.list-top {
- (3): position: relative
- (4): height: 100%;
- (6):.list-top::after {
- (7): content: " &q
- (8): display: block;
- (9): padding-top: 100%;
- (11):.top-info {
- (12): position: absolute
- (13): bottom: 0;
- (14): width: 100%;
- (15): z-index: 3;
- (17):.top-img {
- (18): width: 100%;
- (19): height: 100%;
- (20): position: absolute
- (22):.top-info-inner {
- (23): display: -webkit-b
- (24): -webkit-box-align:
- (25): margin: 0 15px 25p
- (26): color: #fff;
- (28):.top-info-text {
- (29): -webkit-box-flex:
- (30): margin-right: 10px
- (32):.top-info-title {
- (33): font-size: 24px;
- (34): line-height: 36px;
- (35): white-space: nowra
- (36): overflow: hidden;
- (38):.top-info-base {
- (39): font-size: 14px;
- (40): line-height: 20px;
- (46):.tl-top-b {
- (47): position: absolute
- (48): bottom: 0;
- (49): width: 100%;
- (52):.tl-top-b::after {
- (53): content: " &q
- (54): display: block;
- (55): padding-top: 60%;
- (60):.tl-top-play {
- (61): position: relative
- (62): display: block;
- (63): width: 42px;
- (64): height: 42px;
- (65): margin-left: 10px;
- (66): border: solid 3px;
- (67): border-radius: 999
- (69):.tl-top-play::after
- (70): content: " &q
- (71): position: absolute
- (72): left: 50%;
- (73): top: 50%;
- (74): margin-top: -10px;
- (75): margin-left: -5px;
- (76): display: inline-bl
- (77): vertical-align: mi
- (78): width: 0;
- (79): height: 0;
- (80): border-style: soli
- (81): border-width: 10px
- (86)://加载网络请求函数
- (88)://获取应用实例
- (91): data: {
- (93): songList: [],
- (94): imgUrl: ''
- (95): id: 0,
- (96): topinfo: {},
- (97): update_time: '
- (98): },
- (99): onLoad: function (
- (101): var self = this;
- (102): var id = app.globa
- (103): this.setData({
- (104): id: id
- (105): });
- (107): },
- (112): var imgUrl = data.
- (113): this.setData({
- (114): topinfo: data.to
- (115): update_time: dat
- (116): });
- (117): this.setSongList(d
- (118): },
- (122): var list = [];
- (124): var item = songs
- (125): var song = {};
- (126): var album = {};
- (127): album.mid = item
- (128): album.id = item.
- (129): album.name = ite
- (130): album.desc = ite
- (131): song.id = item.d
- (132): song.mid = item.
- (133): song.name = item
- (134): song.title = ite
- (135): song.subTitle =
- (136): song.singer = it
- (137): song.album = alb
- (140): list.push(song);
- (141): }
- (142): this.setData({
- (143): songList: list
- (144): })
- (145): }
- (149): var list = this.da
- (151): playList: list,
- (153): });
- (154): wx.navigateTo({
- (156): });
- (157): },
- (158): musicItemTap: func
- (161): var list = this.da
- (162): app.setGlobalData(
- (163): playList: list,
- (165): });
- (166): wx.navigateTo({
- (167): url: '../pla
- (168): });
- (169): },
为了解决这个问题,我们给图片添加一个渐变的遮罩,就像图10-8那样,这样到达文字部分时,背景就变成了黑色,不会影响文字的显示,而且达到了由图片到底下列表颜色渐变的效果,非常美观。
这个效果主要靠我们的格式文件实现,我们先写我们熟悉的部分。
.list-top {
position: relative;
height: 100%;
}
.list-top::after {
content: " ";
display: block;
padding-top: 100%;
}
.top-info {
position: absolute;
bottom: 0;
width: 100%;
z-index: 3;
}
.top-img {
width: 100%;
height: 100%;
position: absolute;
}
.top-info-inner {
display: -webkit-box;
-webkit-box-align: center;
margin: 0 15px 25px;
color: #fff;
}
.top-info-text {
-webkit-box-flex: 1;
margin-right: 10px;
}
.top-info-title {
font-size: 24px;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
}
.top-info-base {
font-size: 14px;
line-height: 20px;
}
复制代码
“::after”表示在“.list-top”后边添加,为了是在不修改布局文件的情况下,添加视图以达到美化的效果。
我们需要添加的遮罩为布局里“top—back”这部分,格式文件为:
.tl-top-b {
position: absolute;
bottom: 0;
width: 100%;
background-image: -webkit-linear-gradient(top,transparent,currentColor 80%);
}
.tl-top-b::after {
content: " ";
display: block;
padding-top: 60%;
}
复制代码
-webkit-linear-gradient(top,transparent,currentColor 80%)这行代码为我们建立了线性渐变的效果,这样我们的图片底部就会出现渐变为黑色的效果了。
剩下播放按钮的样式,这里因为用到了渐变的遮罩和背景图,为了达到最好的效果,这个按钮就不能用图片来显示了,我们使用代码来创建一个播放按钮。
.tl-top-play {
position: relative;
display: block;
width: 42px;
height: 42px;
margin-left: 10px;
border: solid 3px;
border-radius: 999px;
}
.tl-top-play::after {
content: " ";
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -5px;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 16px;
border-color: transparent transparenttransparent #fff;
}
复制代码
视图建立完毕,开始为视图填充数据。
//加载网络请求函数
var MusicService = require('../../services/music');
//获取应用实例
var app = getApp();
Page({
data: {
// text:"这是一个页面"
songList: [],
imgUrl: '',
id: 0,
topinfo: {},
update_time: '',
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var self = this;
var id = app.globalData.topListId;
this.setData({
id: id
});
MusicService.getTopListInfo(id, this.getTopListCallback)
},
})
复制代码
这里我们获取了保存于全局变量里的topListId(即我们点击的排行分类的ID),然后使用这个ID请求网络。
getTopListCallback: function (data) {
var imgUrl = data.topinfo.pic_album;
this.setData({
topinfo: data.topinfo,
update_time: data.update_time
});
this.setSongList(data.songlist);
},
复制代码
使用回调函数为我们的data赋值之后,这里调用了setSongList这个方法,通过这个方法我们把返回数据里我们需要的内容保存到songList里。
setSongList: function (songs) {
var list = [];
for (var i = 0; i < songs.length; i++) {
var item = songs[i];
var song = {};
var album = {};
album.mid = item.data.albummid
album.id = item.data.albumid
album.name = item.data.albumname;
album.desc = item.data.albumdesc
song.id = item.data.songid;
song.mid = item.data.songmid;
song.name = item.data.songname;
song.title = item.data.songorig;
song.subTitle = '';
song.singer = item.data.singer;
song.album = album;
song.time_public = item.time_public;
song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + album.mid + '.jpg?max_age=2592000'
list.push(song);
}
this.setData({
songList: list
})
}
复制代码
最好完成此页面里的点击事件:
mainTopTap: function (e) {
var list = this.data.songList;
app.setGlobalData({ //使用全局变量playList来保存我们当前的list
playList: list,
playIndex: 0 //表示从第一首歌曲开始播放
});
wx.navigateTo({
url: '../play/play' //跳转到播放页
});
},
musicItemTap: function (e) {
var dataSet = e.currentTarget.dataset;
var index = dataSet.index; //获取点击的item的序号
var list = this.data.songList;
app.setGlobalData({
playList: list,
playIndex: index //从点击歌曲开始播放
});
wx.navigateTo({
url: '../play/play'
});
},
微信小程序音乐播放器页面渲染的方法的详细内容,希望对您有所帮助,信息来源于网络。