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


1.效果

2.說明

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

3.使用方法

3.1 引入uni-icons插件

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

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

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

3.2 復制uniicons.ttf文件到static目錄下

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

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

3.3 配置頁面

打開pages.json頁面,進行如上配置。

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

text 填寫圖標的名字。

3.4 找到想要的圖標

3.4.1 打開官方文檔:官方文檔示例

上面可以看到圖標的名字。

3.4.2 再打開uni_modules/uni-icons/components/uni-icons目錄,就是剛剛導入插件的目錄

打開icon.js,搜索剛剛看到的圖標名字:

需要的是unicode

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

4.綁定點擊事件

在配置的頁面vue文件中添加如下代碼:

onNavigationBarButtonTap(e) {
	this.openPop();// 這是我自己寫的方法
   },

如圖所示,該事件與onshow、onready、method等同級。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM