Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the role of navbar in WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the role of navbar in WeChat Mini Programs"?

Detailed explanation of WeChat Mini Programs navbar example

Realize the effect picture:

Data

TypeList: [{name: daily, id: "1"}, {name: "Weekly", id: "2"}, {name: "monthly", id: "3"}, {name: "contents", id: "4"}]

Js

That.setData ({dateValue: util.formatTime (new Date ()), / / picker date typeList: appInstance.typeList, currentTypeId: "1"}) / / add click template click event for (var I = 0; I < appInstance.typeList.length) ) {(function (item) {pageObject ['bind' + item.id] = function (e) {this.setData ({currentTypeId: e.currentTarget.dataset.index})}) (appInstance.typeList [I])}

Wxml

{{type.name}} time: {{dateValue}}

Wxss

.timePicker {width: 90%; padding: 10rpx; margin: auto; border: 1px solid red;} .menu {display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;} dt {width: 25%; height: 100rpx;} .noCurrentType {height: 90rpx; color: black; padding-left: 30rpx; border: 1px solid; background-color: # c2c2c2;} .yesCurrentType {color: Padding-left: 30rpx;} at this point, I believe you have a deeper understanding of "what is the role of navbar in WeChat Mini Programs". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.