微信小程序音樂播放器,音樂播放器小程序制作步驟（頁面渲染）
2018-03-21
導讀：為了解決這個問題，我們給圖片添加一個漸變的遮罩，就像圖10-8那樣，這樣到達文字部分時，背景就變成了黑色，不會影響文字的顯示，而且達到了由圖片到底下列表顏色漸變的效果，...
頁面渲染
為了解決這個問題，我們給圖片添加一個漸變的遮罩，就像圖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 transparent transparent #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'
- });
- },
上一節：微信小程序小白項目開發案例之音樂播放器-獲取列表頁數據
下一節：微信小程序小白項目開發案例之音樂播放器-完成相似頁面
第二部分：如何開通一個小商店
您可能感興趣: 小程序制作
掃碼免費領取運營資料包
