小編給大家分享一下微信小程序中navbar有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

微信小程序 navbar實例詳解
實現效果圖:

data
typeList: [
{ name: "日報", id: "1" },
{ name: "周報", id: "2" },
{ name: "月報", id: "3" },
{ name: "目錄", id: "4" }]js
that.setData({
dateValue: util.formatTime(new Date()), //picker date
typeList: appInstance.typeList,
currentTypeId: "1"
})
//添加點擊模板點擊事件
for (var i = 0; i < appInstance.typeList.length; i++) {
(function (item) {
pageObject['bind' + item.id] = function (e) {
this.setData({
currentTypeId: e.currentTarget.dataset.index
})
}
})(appInstance.typeList[i])
}wxml
<dl class="menu">
<block wx:for="{{typeList}}" wx:for-item="type" wx:key="{{index}}" wx:for-index="{{index}}">
<dt bindtap="bind{{type.id}}" data-index="{{type.id}}" class="{{currentTypeId==type.id?'yesCurrentType':'noCurrentType'}}">{{type.name}}</dt>
</block>
</dl>
<picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12">時間:{{dateValue}}
<image class="selReportImg" src="../images/clock.png"></image>
</picker>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: black;
padding-left: 30rpx;
}以上是“微信小程序中navbar有什么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯網站建設公司行業資訊頻道!
另外有需要云服務器可以了解下創新互聯建站www.yijiale78.com,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
文章標題:微信小程序中navbar有什么用-創新互聯
網站路徑:http://www.yijiale78.com/article40/djjoho.html
成都網站建設公司_創新互聯,為您提供電子商務、企業網站制作、網站建設、企業建站、響應式網站、用戶體驗
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯