推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1257|回復: 0
    打印 上一主題 下一主題

    [小程序教程] 微信小程序教程(21) :微信小程序之頂部導航欄(選項卡)實例

    [復制鏈接]
    跳轉到指定樓層
    樓主
    發表于 2018-4-21 16:39:07 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

    需求:頂部導航欄

    效果圖:




    wxml:


    [html] view plain copy


    • <!--導航條-->  
    • <view class="navbar">  
    •   <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>  
    • </view>  
    •   
    • <!--首頁-->  
    • <view hidden="{{currentTab!==0}}">  
    •   tab_01  
    • </view>  
    •   
    • <!--搜索-->  
    • <view hidden="{{currentTab!==1}}">  
    •   tab_02  
    • </view>  
    •   
    • <!--我-->  
    • <view hidden="{{currentTab!==2}}">  
    •   tab_03  
    • </view>  



    wxss:

    [css] view plain copy


    • page{  
    •   display: flex;  
    •   flex-direction: column;  
    •   height: 100%;  
    • }  
    • .navbar{  
    •   flex: none;  
    •   display: flex;  
    •   background: #fff;  
    • }  
    • .navbar .item{  
    •   position: relative;  
    •   flex: auto;  
    •   text-align: center;  
    •   line-height: 80rpx;  
    • }  
    • .navbar .item.active{  
    •   color: #FFCC00;  
    • }  
    • .navbar .item.active:after{  
    •   content: "";  
    •   display: block;  
    •   position: absolute;  
    •   bottom: 0;  
    •   left: 0;  
    •   right: 0;  
    •   height: 4rpx;  
    •   background: #FFCC00;  
    • }  


    js:

    [javascript] view plain copy


    • var app = getApp()  
    • Page({  
    •   data: {  
    •     navbar: ['首頁', '搜索', '我'],  
    •     currentTab: 0  
    •   },  
    •   navbarTap: function(e){  
    •     this.setData({  
    •       currentTab: e.currentTarget.dataset.idx  
    •     })  
    •   }  
    • })  


    運行:





    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411

    QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 遇乐四川麻将免费下载 11选五5河北走势 河北家乡棋牌作弊器 赚钱的网站 喜迎捕鱼游戏中心下载 河北快三预测软件下载 一分赛车是真的吗 竞彩比分计算 24500皇冠比分 电脑版 德甲联赛赛程积分2019 幸运赛车全天计划 云南麻将烂牌怎么胡