您好,登錄后才能下訂單哦!
最近開發(fā)小程序,需要做一個導(dǎo)航,導(dǎo)航可以通過template寫出來,但是這個項(xiàng)目需要在導(dǎo)航中處理一些邏輯,做成組件更方便些。
首先新建header文件夾,里面新建對應(yīng)的js、json、wxml、wxss文件。
<!-- 公共頭部組件 --> <view class='headers'> <navigator open-type="redirectTo" class='logo' url="../index/index" hover-class="none"> <image src="../../assets/img/logo2.png" mode="widthFix"></image> </navigator> <view class="phone_nav_switch" bindtap="controlNav"> <view class="iconfont icon-daohang" hidden="{{navIsShow}}"></view> <view class="iconfont icon-guanbi" hidden="{{!navIsShow}}"></view> </view> <view class="nav"> <view class="shadow {{navIsShow ? 'active':''}}" bindtap="controlNav"></view> <view class="bg {{navIsShow ? 'active':''}}"> <view class='con' wx:for="{{navs}}" wx:key="item.url"> <navigator open-type="redirect" data-index="{{index}}" class="{{index === navActive ? 'active' : ''}}" url="{{item.url}}" hover-class="none"> {{item.text}} </navigator> </view> </view> </view> <!-- 返回頂部 --> <view class="backTop" bindtap="goTop" hidden='{{floorstatus}}'> <text class="icon iconfont icon-iconfonticontrianglecopy"></text> </view> </view>
header.js里的導(dǎo)航數(shù)據(jù)
/** * 組件的屬性列表 */ properties: { // 當(dāng)前導(dǎo)航高亮 navActive: { // 類型 type: Number, // 默認(rèn)值 value: 0 } }, data: { // 導(dǎo)航開關(guān) navIsShow: false, currentIndexNav: 0, // floorstatus: false, navs: [ { text: '網(wǎng)站首頁', url: '../index/index' }, { text: '招商加盟', url: '../join/join' }, { text: '關(guān)于煮田', url: '../about/about' }, { text: '煮田美食', url: '../food/food' }, { text: '最新資訊', url: '../news/news' }, { text: '門店查詢', url: '../search/search' }, { text: '聯(lián)系我們', url: '../contact/contact' }, { text: '視頻列表', url: '../videoItem/videoItem' } ] },
導(dǎo)航放在class="nav"中,header.json文件中寫入
{ "component": true }
需要引入組件的頁面的json文件寫入,比如index.json
{ "component": true, "usingComponents": { "header":"../header/header" } }
然后在index.wxml引入組件,navActive是傳給組件的值,目的是為了對應(yīng)導(dǎo)航組件內(nèi)的導(dǎo)航每一項(xiàng)的index,比如首頁的index為0,那我在首頁內(nèi)定義的navActive就是0,
<!-- 頭部組件 --> <view class='header'> <!-- 導(dǎo)航高亮傳值 --> <header navActive='0'></header> </view>
如果相等當(dāng)前頁面就會高亮
需要在在heaer.js設(shè)置navActive的類型,通過上面的操作,我是能夠?qū)崿F(xiàn)當(dāng)前頁面導(dǎo)航高亮的
,
希望能幫到需要的人,如果覺得我上面寫的不清楚的話,這是我的github
https://github.com/mazixiao/wechat_zhutian
,這個是我做好了的
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。