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

This article introduces the relevant knowledge of "how to achieve a music player by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Start building the home page of Mini Program.

As a first step, we need to create the navigation bar at the top

Create a view for each state of each tag (checked / unchecked).

Recommend

Recommend

Rank

Rank

Search

Search

. tab-item {

Float: left

Width: 33.333333%

Height: 43px

Font-size: 16px

Text-align: center

}

.tab-item-selected {

Color: # 31c27c

Border-bottom: 2px solid # 31c27c

}

All six view have the class property of tab-item, where the widths of the components are defined as 1x3, font centered display, and font size. The three layouts have the tab-item-selected property, which adds a green border at the bottom to the view. CurrentView to control the value of this component, when currentView=1, according to the wx:if attribute, only the "recommended" view with the bottom border and the "ranking" without the bottom border, the "search" will be rendered, and the desired results will be achieved.

Write the click event tabItemTap for view in index.js, which is the same name as bindtap when we write wxml.

/ / obtain an application instance

Var app = getApp ()

Page ({

Data: {

CurrentView: 1

}

OnLoad: function () {

Var that = this

}

TabItemTap: function (e) {

Var _ dataSet = e.currentTarget.dataset

This.setData ({

CurrentView: _ dataSet.view

});

}

})

After each click, get the value of the data-view that clicked on view, and then assign this value to currentView to update the interface.

This is the end of the content of "how to realize the Music player by WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.