icono de la barra de navegación personalizada uni-app + evento (1)

1. Elija el icono que desee de los gráficos vectoriales de Alibaba: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

Agréguelo a su propio proyecto y descárguelo al escritorio

2. Abra el proyecto descomprimido y copie los dos archivos a la carpeta estática de su proyecto:

3. Úsalo en la página de la página

"titleNView":{
	"type":"default",
	"buttons":[{
		"text": "\ue618",
		"fontSrc": "/static/font/iconfont.ttf",
		"fontSize": "22px",
		"color":"#fff",
		"float": "right"
	},{
		"text": "\ue607",
		"fontSrc": "/static/font/iconfont.ttf",
		"fontSize": "22px",
		"color":"#fff",
		"float": "left"
	}]
}

1. Puntos a los que prestar atención: el valor del texto es encontrar el icono correspondiente en iconfont.css, columna: (debe agregar u delante de e para mostrar normalmente)

.iconshezhi:before {
  content: "\e618"; /* 使用:\ue618 */
}

2. FontSrc importa el archivo .ttf, el tamaño, el color y la posición se pueden escribir normalmente

4. Establezca el evento de clic: agregue el siguiente código a mi página ( mismo nivel que los datos y la carga ):

export default {
		data() {
			return {
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.float=='right'){
			console.log("你点击了设置")
			}else{
			console.log("你点击了扫一扫")
			}
		},
		methods: {
		}
	}

 

Supongo que te gusta

Origin blog.csdn.net/weixin_44285250/article/details/108620842
Recomendado
Clasificación