Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "the method of WeChat Mini Programs music player page rendering". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "WeChat Mini Programs music player page rendering method" can help you solve your doubts. Let's go deep into the editor's ideas and learn new knowledge together.

Page rendering

In order to solve this problem, we add a gradual mask to the picture, as shown in figure 10-8, so that when you reach the text, the background becomes black, which does not affect the display of the text, and achieves the effect of gradual color change from the bottom of the picture to the bottom. Very beautiful.

This effect is mainly achieved by our format files, and we first write the parts that we are familiar with.

. 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

}

Copy the code

":: after" means to add after ".list-top" in order to add views to achieve beautification without modifying the layout file.

The mask we need to add is the "top-back" part of the layout, and the format file is:

.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%

}

Copy the code

-webkit-linear-gradient (top,transparent,currentColor 80%) this code establishes a linear gradient effect for us, so that the bottom of our picture will appear a gradient to black effect.

The rest of the play button style, here because of the use of the gradient mask and background image, in order to achieve the best effect, this button can not be displayed with pictures, we use the code to create a play button.

.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

}

Copy the code

After the view is established, you begin to populate the view with data.

/ / load the network request function

Var MusicService = require ('.. /.. / services/music')

/ / obtain an application instance

Var app = getApp ()

Page ({

Data: {

/ / text: "this is a page"

SongList: []

ImgUrl:''

Id: 0

Topinfo: {}

Update_time:''

}

OnLoad: function (options) {

/ / parameters brought by page initialization options for page jump

Var self = this

Var id = app.globalData.topListId

This.setData ({

Id: id

});

MusicService.getTopListInfo (id, this.getTopListCallback)

}

})

Copy the code

Here we get the topListId saved in the global variable (that is, the ID of the ranking category we clicked on), and then use this ID to request the network.

GetTopListCallback: function (data) {

Var imgUrl = data.topinfo.pic_album

This.setData ({

Topinfo: data.topinfo

Update_time: data.update_time

});

This.setSongList (data.songlist)

}

Copy the code

After using the callback function to assign a value to our data, we call the setSongList method, through which we save the contents we need in the returned data to the songList.

SetSongList: function (songs) {

Var list = []

For (var I = 0; I < songs.length; iTunes +) {

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

})

}

Copy the code

It is best to complete the click events on this page:

MainTopTap: function (e) {

Var list = this.data.songList

App.setGlobalData ({/ / use the global variable playList to save our current list

PlayList: list

PlayIndex: 0 / / indicates that the first song starts to play

});

Wx.navigateTo ({

Url:'.. / play/play' / / Jump to the play page

});

}

MusicItemTap: function (e) {

Var dataSet = e.currentTarget.dataset

Var index = dataSet.index; / / get the serial number of the clicked item

Var list = this.data.songList

App.setGlobalData ({

PlayList: list

PlayIndex: index / / start playing by clicking on the song

});

Wx.navigateTo ({

Url:'.. / play/play'

});

}

After reading this, the article "WeChat Mini Programs Music player Page rendering method" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.