northwest uniapp: 頂部導航欄右側添加uni-icons圖標,並綁定點擊事

image

說明

該配置按頁面配置,無法全局配置

使用方法

引入uni-icons插件

插件地址:點擊此處跳轉到uni-icons

引入以後,會發現uni-modules中新增如下目錄和文件:

僅需要那個 uniicons.ttf 文件,不引入插件、單獨把那個文件下載到本地也是可以的。

複製uniicons.ttf文件到static目錄下

不知道爲什麼非要放進去,直接寫node_modules路徑好像不管用,所有的靜態資源都往static裏面扔了。

也有可能是我路徑沒寫對(這事兒我常幹)

配置頁面

pages.json
image

fontSrc 填寫static下的uniicons.ttf地址,注意寫準確。

text 填寫圖標的名字。

找到想要的圖標

打開官方文檔,上面可以看到圖標的名字。

再打開uni_modules/uni-icons/components/uni-icons目錄,就是剛剛導入插件的目錄
image
打開icon.js,搜索剛剛看到的圖標名字:
image
需要的是unicode

然後在頁面配置的"text"中寫成"\ue6be"這樣的格式。

綁定點擊事件

在配置的頁面vue文件中添加如下代碼:
image
如圖所示,該事件與onshow、onready、method等同級。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章