微信小程序底部菜單json配置

程序的經典的底部菜單，在json配置文件設置，最多不能超過五個，小程序的底部菜單有時候新增的頁面沒有，這種情況需要切一個底部。

那么接下來就看看是如何實現的吧。

第一步，尋找合適的圖標準備好合適的圖標，每組圖標為2張，一張是默認狀態，一張是選中狀態

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

第二步，將圖片放在自己程序的路徑下大家可以建立一個images目錄

第三步，添加代碼小程序的底部菜單在官方文檔是一個app.json中的一個全局配置屬性

大家可以直接將下面的代碼放到app.json中，注意要在外面還有一個整體的{}


"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/menuicon/index.png",
"iconPath": "images/menuicon/index1.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/menuicon/list.png",
"iconPath": "images/menuicon/list1.png",
"pagePath": "pages/list/list",
"text": "列表"
},
{
"selectedIconPath": "images/menuicon/user.png",
"iconPath": "images/menuicon/user1.png",
"pagePath": "pages/user/user",
"text": "個人中心"
}
]
}

詳細的介紹可以看這個官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

篇文章我們一起來實現一個vue的下拉菜單組件。
像這種基本UI組件，網上已經有很多了，為什么要自己實現呢？其實并不是有意重復造輪子，而是想通過這個過程回顧一下vue組件開發的一些細節和注意事項。

為什么選擇下拉菜單組件？
因為：麻雀雖小五臟俱全，這個小小的組件涉及到了不少vue組件開發的知識點。
好了，那就開始吧！

首先創建一個vue-cli的項目，筆者用的是vue-cli3，創建過程略，然后創建一個vue組件：DropDownList.vue

在編寫模板之前，我們來分析一下這個組件的視圖結構和功能。
下拉菜單組件應該由兩部分組成：

選中項的文本
待選菜單（默認隱藏）

它的主要功能包括：

鼠標經過下拉菜單組件，顯示待選菜單
鼠標滑出下拉菜單組件，隱藏待選菜單
鼠標點擊待選菜單中的條目，選中項文本更新，組件派發change事件
我們編寫如下這樣的模板：

<template>
  <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>選中項的文本<i></i></span>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>廣州</li>
        </ul>
    </div>
</template>

選中項文本右側的i標簽，用來實現下拉菜單的三角形圖標，在下文的css中我們用背景圖來實現。
我們給根元素div已經添加了鼠標經過和滑出的回調函數，具體實現見下文。

接下來我們為這個下拉菜單編寫樣式，在模板下方添加style標簽，為了防止和其他組件的樣式發生沖突，筆者建議大家在開發組件時，都給style加上scoped屬性。另外，筆者在這里用到了scss，具體代碼如下：

<style scoped lang="scss">
    .zq-drop-list{
        display: inline-block;
        min-width: 100px;
        position: relative;
        span{
            display: block;
            height: 30px;
            line-height: 30px;
            background: #f1f1f1;
            font-size: 14px;
            text-align: center;
            color: #333333;
            border-radius: 4px;
            i{
                background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
                margin-left: 6px;
                display: inline-block;
            }
        }
        ul{
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: solid 1px #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            li{
                list-style: none;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                border-bottom: solid 1px #f1f1f1;
                background: #ffffff;
            }
            li:last-child{
                border-bottom: none;
            }
            li:hover{
                background: #f6f6f6;
            }
        }
    }
</style>

關于樣式，這里就不詳細展開了，只說其中幾個需要注意的點：

那個i元素的樣式，我用到了一個網絡圖片，大家可以自行更換
待選菜單ul在css里并沒有讓它隱藏，因為我們要通過js來控制，具體原因見下文
待選菜單ul使用了絕對定位，因為當它展開的時候，不應該影響頁面上其他元素的布局

現在這個組件大概長這個樣子：

1.png

我們繼續為這個組件定義屬性，很顯然，待選菜單應該作為屬性傳進來，一定不能是內部寫死的，屬性定義如下：

<script>
export default {
    name: "DropDownList",
    props:{
        dataList:{
            type:Array,
            default(){
                return [
                    {name: "選項一"},
                    {name: "選項二"}
                ]
            }
        },
        labelProperty:{
            type:String,
            default(){ return "name" }
        }
    },
    data(){
        return {
            activeIndex:0
        }
    },
}

其中dataList就是待選菜單的數據源屬性，這里我們給這個屬性定義了默認值，這也是筆者建議大家養成的一個習慣，作為一個組件，最好有默認值，因為當別人使用你的組件時，可以先不設置相關屬性，就能看到一個成品的效果，也能快速查看你這個組件所需屬性的數據細節。
另外一個屬性是labelProperty，這個屬性的作用是什么？我們實際項目中的數據源，并不一定都含有name這個字段，因此就可能導致下拉菜單無法渲染數據的文本，于是我們定義了這個屬性用來指定實際數據源渲染文本的字段，這個字段必須是字符串。這個屬性的默認值是name，因為它需要和默認數據源保持一致。相信你還看到了一個組件內部數據，activeIndex，這個是用來表示當前選中項的索引的，我們后面會用到。

現在我們就可以在其他地方引入并使用這個組件了，雖然它還沒有完成，但我們不妨先讓它顯示在界面上吧：

<template>
  <div class="home">
    <DropList :dataList="dplist" labelProperty="city" @change="onDpChange($event)"></DropList>
    <p>其他文本內容</p>
  </div>
</template>
<script>
  import DropList from '@/components/DropDownList.vue'
  //其他代碼略
</script>

這個頁面引入并使用了我們的DropDownList組件，:dataList="dplist" 綁定了當前頁面的dplist數組到組件的dataList屬性上，這個數組中的對象有一個city字段，我們希望此字段顯示在下拉菜單上，因此我們設置組件的labelProperty為city，我們還給這個組件注冊了change事件，這個組件內部需要派發這個事件，見下文。

現在我們回到組件的模板部分，發現它都還是靜態內容，我們把這些靜態內容修改為通過屬性渲染。

<template>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</template>

其中待選菜單li的文本是 item[labelProperty] 這樣就能正確的顯示開發者指定的字段了。
我們看看選中項的文本表達式：dplLabel，我們并沒有定義這個屬性，也沒有定義這個內部數據，它是哪兒來的？選中項的文本應該是 dataList[activeIndex][labelProperty] （這個很好理解吧，有問題請留言），但這個表達式太長了，寫在模板里不利于維護，我們就把它寫到計算屬性里吧。

computed:{
        dplLable(){
            return this.dataList[this.activeIndex][this.labelProperty]
        }
    }

于是才有了上面的dplLabel，計算屬性真的很好用呢。

現在下拉菜單的視圖和數據關聯部分我們已經寫完了，接下來我們要實現它的功能。

第一步是先讓待選菜單默認隱藏起來，這里我們為什么不直接用css的display:none呢，然后鼠標經過的時候display:block不就可以了嗎？因為這樣的話，我們無法實現點擊待選菜單條目的時候讓它隱藏，體驗不好。我們用js來控制，但vue對直接訪問dom元素支持的并不好，我們要想在組件初始化的時候訪問dom元素，有一個最方便的做法，那就是：自定義指令。

我們為下拉菜單組件添加局部自定義指令，代碼如下：

directives:{
        dpl:{
            bind(el){
                el.style.display="none";
            }
        }
    },

這個dpl就是自定義指令啦，請忽略我笨拙的命名哈！然后我們在自定義指令的鉤子函數bind方法中，訪問el元素，控制它的style屬性display:none; 最后，把這個自定義指令加到模板里面的ul標簽上。別忘了要加v-，現在看看效果，待選菜單已經隱藏了。

<ul v-dpl>

我們利用自定義指令鉤子函數訪問dom元素，實現了對dom的控制，這一點非常實用！

讓我們繼續實現最開始為下拉菜單定義的鼠標經過和鼠標滑出的監聽，實現待選菜單的顯示與隱藏。

onDplOver(event){
    let ul=event.currentTarget.childNodes[1];
    ul.style.display="block";
},
onDplOut(event){
    let ul=event.currentTarget.childNodes[1];
    ul.style.display="none";
},

我們在鼠標事件中，訪問event的currentTarget對象，為什么不是target？因為下拉菜單的子元素也會觸發這個事件，如果訪問target，可能不會是我們預期的頂層元素。

最后一步，我們實現待選菜單條目的點擊事件，點擊后，待選菜單隱藏，修改內部狀態，派發change事件。

onLiClick(index){
    let path=event.path || (event.composedPath && event.composedPath()) //兼容火狐和safari
    path[1].style.display="none";
    this.activeIndex=index;
    this.$emit("change", {
        index:index,
        value:this.dataList[index]
    })
}

這里有一個細節需要注意，我們要通過li元素找到外層ul元素，但path不支持火狐和safari，好在這兩個瀏覽器支持composedPath，因此才有了第一行代碼的兼容寫法。然后通過修改內部數據activeIndex實現選中項文本的更新，最后調用emit方法向父元素派發change事件，別忘了把事件對象封裝好傳出去。

完整的代碼如下：

<template>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul v-dpl>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "DropDownList",
    data(){
        return {
            activeIndex:0
        }
    },
    props:{
        dataList:{
            type:Array,
            default(){
                return [
                    {name: "選項一"},
                    {name: "選項二"}
                ]
            }
        },
        labelProperty:{
            type:String,
            default(){ return "name" }
        }
    },
    directives:{
        dpl:{
            bind(el){
                el.style.display="none";
            }
        }
    },
    methods:{
        onDplOver(event){
            let ul=event.currentTarget.childNodes[1];
            ul.style.display="block";
        },
        onDplOut(event){
            let ul=event.currentTarget.childNodes[1];
            ul.style.display="none";
        },
        onLiClick(index){
            let path=event.path || (event.composedPath && event.composedPath()) //兼容火狐和safari
            path[1].style.display="none";
            this.activeIndex=index;
            this.$emit("change", {
                index:index,
                value:this.dataList[index]
            })
        }
    },
    computed:{
        dplLable(){
            return this.dataList[this.activeIndex][this.labelProperty]
        }
    }
}
</script>


<style scoped lang="scss">
    .zq-drop-list{
        display: inline-block;
        min-width: 100px;
        position: relative;
        span{
            display: block;
            height: 30px;
            line-height: 30px;
            background: #f1f1f1;
            font-size: 14px;
            text-align: center;
            color: #333333;
            border-radius: 4px;
            i{
                background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
                margin-left: 6px;
                display: inline-block;
            }
        }
        ul{
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: solid 1px #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            li{
                list-style: none;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                border-bottom: solid 1px #f1f1f1;
                background: #ffffff;
            }
            li:last-child{
                border-bottom: none;
            }
            li:hover{
                background: #f6f6f6;
            }
        }
    }
</style>

以上為大家展示了vue如何實現一個下拉菜單組件，雖然比較簡單，但也基本涉及到了組件開發常用的一些特性。

歡迎大家在評論區留言自己想了解的前端話題，我會繼續推出更多精彩的文章！

作者：_乾_
鏈接：https://www.jianshu.com/p/bae49ca02795

窗苦讀十余載

聊大終于等到你！

19級的小萌新注意啦！

您的錄取通知書正迫不及待

翻山越海向您飛奔而去！

想必大家都在好奇

今年的錄取通知書到底什么樣子？

跟隨大聊一起來直擊現場

今天，錄取通知書寄出

從今天開始，將有約8000份2019級新生錄取通知書從聊城大學寄出，寄往27個省、自治區、直轄市。第一批寄出的1738份錄取通知書將寄往十個省、自治區、直轄市，其他錄取通知書隨后也將陸續發出。

接下來

大聊獨家最全面揭秘錄取通知書

快來一覽為快！

★【NO.1】

EMS快遞封面

聊城大學2019年錄取通知書的“外套”如上圖所示，請收到錄取通知書的新生仔細對照，以防上當受騙。

★ 【NO.2】

錄取通知書

2019聊城大學錄取通知書，設計上，首先在色彩上，正面、背面采用了大面積的古銅色為底色，內面采用了淺灰米色為底，兩者疊加，凸顯了濃濃的書卷氣質。結構上，正面做了弧度裁切，像一個大箭頭一樣指向了有意識露出了內頁下方“學在聊大，奠基人生”八個字，突出了聊大對莘莘學子的熱切希望，也為即將成為聊大人的新生指明了方向！

正面聊大校名及錄取通知書這幾個字都采用了燙金印刷工藝，體現了通知書的珍貴感，聊大大門，作為聊大的一道風景，像一座橋梁一樣貫通了通知書的左右兩段，極具形式感和識別性，28根秩序排列的立柱，也彰顯了聊大的歷史厚重及大氣感，它又像一個彩虹鏈接起了聊大另一個標志性建筑——西校圖書館，進一步，彰顯了聊大的文化。

本通知書設計簡潔大氣，在繼承傳統文化的基礎上，又有足夠的現代人文氣質彰顯。有秩序的水紋設計植入，也充分體現了聊大的地域特色，暗喻，聊大這所坐落于中國著名的歷史文化名城，素有“江北水城，運河古都”之稱的聊城市，必將乘風破浪，再創輝煌。

★【NO.3】

《聊城大學2019新生入學手冊》

《聊城大學2019新生入學手冊》（包括：入學須知、收費標準、銀行卡使用說明、易班迎新須知、報到安全指南、應征入伍宣傳單、相關部門通訊方式等）。

★【NO.4】

高校本專科學生資助政策簡介

我校歷來十分重視家庭經濟困難學生資助工作，建立了以生源地助學貸款為主要途徑，包括獎助學金、勤工助學、學費減免、特殊困難補助、綠色通道在內的學生獎勵機制和助學保障體系。

家庭經濟困難的學生，請在入學前到當地政府或民政部門開具家庭困難證明材料，內容應包括家庭年收入狀況、家庭人口數、家庭經濟來源和家庭經濟困難原因等，困難證明必須加蓋村委會（或居委會、企事業單位）、鄉（鎮）政府或街辦兩級行政公章方能生效。

★【NO.5】

銀行卡、行李標簽

學校隨錄取通知書郵寄了兩張未激活的銀行卡，供新生繳費使用。一張農行卡、一張建行卡，選其一激活即可，其他詳見新生入學手冊銀行卡使用說明。行李標簽用于新生入學個人行李標記，以免發生遺失等情況。

★【NO.6】

錄取通知書全家福

公費師范生的新生小可愛們錄取通知書內還包括四份山東省師范生公費教育協議書哦~

工作人員正以最快的速度和最嚴謹的態度

將錄取通知書分批寄出

相信不久以后

你便會收獲到獨一無二的喜悅！

大聊趕在萌新之前

拿著錄取通知書

到學校標志地點

為您實景打卡~

西校區南大門

東校區逸夫圖書館

西校區羨林湖

桃李橋(彩虹橋)

餐廳

西校區紫藤宿舍

東校區日晷廣場

西校區望月橋

新生錄取通知書查詢指南

@全體2019級新生：我校高考錄取通知書將于7月21日開始封裝，7月21日陸續發出，請同學們耐心等待！注意！所有方法只有在學校郵寄后才生效！！！另外，為防止新生信息泄露，我校并未給任何平臺提供新生準考證號，故凡是用準考證號（考生號）查詢的途徑均不可查！請使用快遞單號追蹤查詢！

錄取通知書郵寄信息查詢途徑

1.進入聊城大學2019年普通高考錄取結果查詢地址:

https://admission-art.lcu.edu.cn/query2019/index.jsp

錄取頁面有EMS郵件號（快遞單號）。查詢到郵件號（快遞單號）后，復制，到EMS官網上或EMS微信公眾號輸入郵件號（快遞單號），就可以追蹤到郵遞信息啦。EMS郵件查詢地址:

http://www.ems.com.cn/index.html

2.關注聊城大學微信號

點擊底部菜單欄錄取通知書

按步驟操作查詢即可

大聊祝福即將進入大學的你們

珍惜當下，勇敢追夢

不忘初心，砥礪前行

在聊大，擁抱更加精彩的未來！

收到錄取通知書的你

記得要和大聊分享你的喜悅哦~

參與“我與錄取通知書合張影”活動

第一時間與自己的錄取通知書合影

發送到大聊郵箱203521473@qq.com

大聊整理后會同大家分享你的喜悅哦~

資料來源 | 聊城大學招生處

編輯|王昱宸李瑞峰于春云

圖片 | 姬嗣鈺梁安諾朱紹輝魏超

視頻 | 薛杰王亞茹尹淑軒

責編|王黎

編審|王秀清

投稿郵箱|203521473@qq.com

在線咨詢

上一篇：#科幻
下一篇：園區可視化大屏基于3D引擎開發，北京四度科技專注于3

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

微信小程序底部菜單json配置

您的項目需求