Table des matières
Troisièmement, pour obtenir une compatibilité simultanée
avant-propos
La page d'accueil fournira une zone de recherche aux clients, permettant aux clients de rechercher le contenu qu'ils souhaitent. Ici, une barre de navigation est nécessaire pour réaliser le saut vers la page de recherche. L'effet est le suivant
Application, effet H5
effet d'applet
1. Compatible avec APP et H5
Dans l'exemple de code de configuration titleNView commun, vous pouvez voir le code du style de base comme suit
{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
}, {
"path": "pages/log/log", //日志页面
"style": {
"app-plus": {
"bounce": "none", //关闭窗口回弹效果
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
}
],
"backButton": { //自定义 backButton
"background": "#00FF00"
}
}
}
}
}, {
"path": "pages/detail/detail", //详情页面
"style": {
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
}
}
}
}, {
"path": "pages/search/search", //搜索页面
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px", //输入框圆角
"placeholder": "请输入搜索内容",
"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
}
}
}
}
}
...
]
}
Nous n'avons pas besoin de tout le contenu. Cette fois, je vais introduire la combinaison de "boutons" et "searchInput". Les boutons ici sont en fait les deux images à gauche et à droite de ma barre de navigation, qui peuvent être utilisées avec l'icône pour obtenir la fonction souhaitée. , searchInput est la zone de recherche du milieu
Il doit être configuré dans pages.json et peut être ajouté dans le bouton, mais il convient de noter que peu importe l'ajout de texte ou d'images vectorielles, la valeur par défaut est de flotter à droite, vous pouvez changer l'un d'eux pour flotter à gauche, ici je utilisez Alibaba vector Images de la galerie, téléchargez des fichiers et importez-les. Je peux fournir un dossier gratuitement à ceux qui en ont besoin.
Le code de configuration est le suivant
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "小余努力搬砖",
"app-plus": {
"titleNView": {
"searchInput": {
"backgroundColor": "#f4f4f4",
"borderRadius": "6px",
"placeholder": "请输入搜索内容",
"disabled": true
},
"buttons": [
{
"fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径
"float": "left",
"text": "\ue67a", //引入图片一定要带u
"fontSize": "24px",//大小
"color": "#666666"
},
{
"float": "right",
"text":"\ue661",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "24px",
"color": "#666666"
}
]
}}}Afin d'obtenir l'effet de saut, je souhaite créer un dossier au même niveau de la page. Pour la page de recherche, nous souhaitons que la page d'accueil utilise le cycle de vie de la page surNavigationBarSearchInputClicked (cette fois, le dossier doit être enregistré dans pages.json)
pour sauter à la page que nous voulons en premier
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search'
})
}2. Applet compatible
Vous devez créer un dossier de composants au même niveau que les pages. Dans ce dossier, vous pouvez vous inscrire sans l'importer avec import, et créer un sous-dossier d'emplacement comme suit avec un répertoire du même nom. Aucun des fichiers des composants n'a besoin d'être enregistré dans pages.json. (La principale façon de mettre en œuvre ici est d'afficher une boîte de recherche à travers le style écrit par vous-même)
<template>
<view class='slot'>
<slot name='left'></slot>
<slot name='center'></slot>
<slot name='right'></slot>
</view>
</template>
<script>
export default {
name:"search-slot",
data() {
return {
};
}
}
</script>
<style scoped>
.slot{
width: 750rpx;
display: flex;
}
</style>Introduisez des machines à sous sur la page d'accueil (si vous ne savez pas ou oubliez, vous pouvez apprendre l'enseignement des machines à sous auprès des blogueurs), les images sont des images vectorielles Alibaba importées, les images sont préparées à l'avance par moi, il y a quelqu'un que vous voulez, discuter avec moi en privé. Ce qui suit est ce que j'ai préparé à l'avance, utilisez simplement la classe pour importer
<search-slot class='flex'>
<view class="left" slot='left'>
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="center" slot='center'>
<text class="iconfont icon-sousuo" @click="search"></text>
</view>
<view class="right" slot='right'>
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
Ici, vous devez également cliquer sur la navigation de recherche pour accéder à la page de recherche (cette fois, le dossier doit être enregistré dans pages.json), ce qui se fait via l'événement de liaison @click, et le chemin est la même méthode (create une page de recherche dédiée)
methods: {
search(){
uni.navigateTo({
url:'../search/search'
})
}}code de style css
<style>
.flex {
display: flex;
height: 88rpx;
line-height: 88rpx;
align-items: center;
}
.left {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
.center {
flex: 1;
height: 60rpx;
line-height: 60rpx;
background-color: #eee;
text-align: center;
color: #ccc;
}
.right {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
</style>Troisièmement, pour obtenir une compatibilité simultanée
Grâce au code ci-dessus, la barre de navigation de la zone de recherche a été réalisée dans l'application, h5 et l'applet, mais si vous souhaitez satisfaire l'application, h5 et l'applet en même temps, vous devez porter un jugement régional.
S'il ne s'affiche pas en fonction de la compatibilité, et que les deux barres de navigation du champ de recherche ci-dessus sont configurées en même temps, deux champs de recherche apparaîtront dans l'application et h5 car ils sont compatibles avec la configuration de l'applet
Mais il n'y a qu'une seule applet, car l'applet n'est pas compatible avec le champ de recherche configuré dans pages.json
Ne soyez pas nerveux pour le moment, nous souvenons-nous encore de la requête multimédia, la méthode ici est presque la même que la requête multimédia, utilisez un style spécifique dans un environnement spécifique, nous pouvons trouver une compilation conditionnelle via le document officiel du site ici
Il est très simple à utiliser, tant que le code est encapsulé dans la condition, nous n'avons qu'à encapsuler l'applet ici, uniquement dans la condition compilée dans l'applet WeChat
#ifdef MP
需条件编译的代码
#endif spectacle de code comme ci-dessous
Enveloppez la barre de navigation de l'applet configurée sur la page d'accueil ( l'applet n'est pas compatible avec la configuration dans pages.json, vous n'avez donc pas à vous soucier de savoir si une compilation conditionnelle est requise ici ). de l'applet n'apparaîtra pas dans l'application et h5. . Réalisant ainsi l'effet de compatibilité simultanée.
<!--#ifdef MP -->
<search-slot class='flex'>
<view class="left" slot='left'>
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="center" slot='center'>
<text class="iconfont icon-sousuo" @click="search"></text>
</view>
<view class="right" slot='right'>
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
<!--#endif-->