uniappの背景画像を全画面表示にするには、<style>次のスタイルをタグに追加できます。
ページ { 背景画像: url('/static/bg.jpg'); 背景サイズ: カバー; 背景リピート: リピートなし; 背景位置: 中央中央; }
このスタイルでは、background-image 属性は背景画像の URL を設定し、background-size 属性は背景画像のサイズを設定し、background-repeat 属性は背景画像を繰り返すかどうかを設定し、background-position 属性は背景画像を繰り返すかどうかを設定します。背景画像の位置。背景画像を画面全体に表示するには、background-size: cover; を設定します。
背景画像を設定する前に、この画像がプロジェクトの静的リソース フォルダーにあることを確認してください。さらに、ページの背景画像を全画面表示したい場合は、<style> でページのスタイルを設定することもできます。
-
uniapp アプレットのナビゲーションに画像を設定し、ネイティブ ナビゲーション バーを削除する方法
補足: Pages.json ファイルのグローバル構成オプションの下にプロパティを追加するには
"ナビゲーションスタイル": "カスタム"
オリジナルのナビゲーションバーをキャンセルし、ナビゲーションバーを自分で設計し、コンテンツをグローバルにロードすることを意味します
<template>
<view>
<view class="status_bar">
<!-- これはステータス バーです-->
</view>
<view> ステータス バーの下のテキスト</view>
</view>
</template>
< style>
.status_bar { // これはナビゲーション バーの高さの設定であり、高さ (50px) を追加するのが最善です height : var(--status-bar-height); width: 100%; } </style>
<template>
<view class="container">
<view class="content">
<!-- Uniapp 設定ページの背景画像 -->
<view class="status_bar" :style="{background: 'url(' + imageURL+')'}">
<!-- これはステータス バー -->
<image src="/static/images/Menu icon.png" mode=""></image>
</view>
<view>ステータス バーの下のテキスト </view>
</view>
</view>
</template>
<script>
export default { data() { return { imageURL:'/static/images/ナビゲーションバーの背景.png' }; } } </script>
<!-- ここで、lang='scss' 属性はスーパー CSS に変換されることに注意してください -->
<style lang="scss">
.status_bar { height: 49px; width: 100%; image { width: 24px; height: 24px ; } } </style>
uniappのページジャンプredirectTo、navigateTo、switchTapの違い
uniapp のページジャンプを要約します。
redirectTo: 現在のページを閉じて、指定されたページにジャンプします。
現在のページを閉じて、アプリ内のページにジャンプします。OBJECT パラメータの説明 パラメータのタイプは必須です 説明 urlString は、リダイレクトする必要があるアプリケーション内の非 tabBar ページのパスです。パラメータはパスの後に追加できます。パラメータとパスは?で区切られ、パラメータキーとパラメータ値は=で接続され、異なるパラメータは&;で区切られます。
methods: {
//goregirect()为点击响应事件，可在HTML部分设置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//关闭当前页面，跳转到应用内的某个页面。
url:'/pages/about/about'
});
}
}
navigateTo: 現在のページを保持し、指定されたページにジャンプします。
現在のページを保持し、アプリ内のページにジャンプし、uni.navigateBack を使用して元のページに戻ります。OBJECT パラメータの説明: パラメータのタイプは必須です。urlString は、リダイレクトする必要があるアプリケーション内の非 tabBar ページのパスです。パラメータはパスの後に追加できます。パラメータとパスは?で区切られ、パラメータキーとパラメータ値は=で接続され、異なるパラメータは&;で区切られます。
methods: {
//gonavigate()为点击响应事件，可在HTML部分设置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留当前页面，跳转到应用内的某个页面
url:'/pages/detail/detail'
})
}
}
switchTap: タブバー ページにジャンプし、他の非タブバー ページを閉じるためにのみ使用できます。
tabBar ページにジャンプし、tabBar 以外の他のすべてのページを閉じます。OBJECT パラメーターの説明: パラメーター タイプは、urlString がリダイレクトする必要がある tabBar ページ (app.json の tabBar フィールドで定義する必要があるページ) のパスであることを示すために必要であり、パスの後に続けることはできません。パラメーター
methods: {
checklogin(){
uni.request({
url:'http://localhost:8081/api/user/login',
data: {
email:this.emailone,
password:this.password,
},
success: (res) => {
//登录成功
if(res.data.success ==true) {
uni.showToast({
title:'登录成功',//显示的文字
icon:'success'//显示的图标
});
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url:'../tabbor/index/index'
});
}else{
uni.showToast({
title:'用户名或密码错误',//显示的文字
icon:'none'//显示的图标
});
}
}
})
}
}
navigateBack: 現在のページを閉じて、前のページまたは複数レベルのページに戻ります。
現在のページを閉じて、前のページまたは複数レベルのページに戻ります。getCurrentPages() を通じて現在のページ スタックを取得し、返す必要があるレイヤーの数を決定できます。OBJECT パラメータの説明: パラメータ タイプは、deltaNumber1 によって返されるページ数を示すために必要です。delta が既存のページ数より大きい場合は、ホームページに戻ります。
methods: {
//goBack()为点击响应事件，可在HTML部分设置 @tap="goBack()"
goBack(){
uni.navigateBack({
//关闭当前页面，返回上一页面或多级页面。
delta:1
});
}
}
再起動: すべてのページを閉じて、アプリケーション内のページを開きます。
すべてのページを閉じて、アプリ内のページを開きます。OBJECT パラメータの説明: パラメータ タイプは、urlString がリダイレクトする必要があるアプリケーション内のページのパスであることを示すために必要であり、パラメータはパスの後に追加できます。パラメータとパスは?で区切られ、パラメータキーとパラメータ値は=で接続され、異なるパラメータは&;で区切られます。
uni.reLaunch(
{
URL: 'テスト?id=1'
}
);
デフォルトをエクスポート { onLoad: 関数 (オプション) { console.log(option.query); } }
サードパーティ プログラムを呼び出して、指定された URL openURL を開きます
methods: {
//goopenurl()为点击响应事件，可在HTML部分设置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL('https://www.baidu.com/')
}
}
uniapp ページジャンプ値の送受信
ジャンプによって値を渡す一般的なルーチンは、URL に渡す値を取得し、パラメーターを使用して受信したページの onLoad 関数でその値を受け取ることです。
値ページ:
uni.navigateTo({
url:'页面路径?id=1'
})
ページを受信:
onLoad:function(option) {//option为object类型，会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
}
uniapp フォールバック呼び出しメソッドの基本実装
uniapp のページは、uni.navigateTo、uni.redirectTo、および uni.reLaunch メソッドを通じてリダイレクトできます。これらのページ ジャンプのプロセスでは、多くの場合、ページ ロールバックの機能を実装する必要があります。uniapp は、次のように一般的に使用される豊富なページ ロールバック呼び出しメソッドを提供します。
- uni.navigateBack: このメソッドは、現在のページを閉じて、前のページまたはマルチレベルのページに戻るために使用されます。呼び出しメソッドは比較的単純で、整数パラメータを渡すだけです。返されるレイヤーの数を示します。たとえば、uni.navigateBack(1) は前のページに戻ることを意味し、uni.navigateBack(2) は前の 2 ページに戻ることを意味します。返されるレイヤーの数が現在のページ スタックの長さを超えてはいけないことに注意してください。超えない場合はエラーが発生します。
- uni.switchTab: このメソッドは、tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じるために使用されます。このメソッドは、ページ パス パラメーターを渡す必要があります (例: uni.switchTab({url:'/pages/tabBar/index'}))。
- uni.reLaunch: このメソッドは、すべてのページを閉じて、特定のページを開くために使用されます。このメソッドは、ページ パス パラメーターを渡す必要があります (例: uni.reLaunch({url:'/pages/home/index'}))。
上記のメソッドは uniapp でページのロールバックを処理するための中核的なメソッドであり、開発者はこれらを使用する際にパラメータを渡す際の正確性と合理性に注意を払う必要があることに注意してください。
2. uni.navigateBack メソッドに関するヒント
uni.navigateBack メソッドは、uniapp ページのロールバックを実装するための最も一般的なメソッドの 1 つであり、多くの開発者も実際に使用していると思います。実際、uni.navigateBack メソッドには注意が必要な詳細とスキルがまだいくつかあります。見てみましょう:
- uni.onBackPress メソッドと併用する
場合によっては、他の業務操作を行うためにユーザーの裏操作を監視する必要があります。このとき、uni.onBackPress メソッドを使用して監視できます。このメソッドには、ユーザーが戻るボタンをクリックしたときにトリガーされるコールバック関数を渡す必要があります。このコールバック関数では、ユーザー操作をインターセプトして処理できます。
- 子コンポーネントで uni.navigateBack メソッドを呼び出します。
uniapp では、サブコンポーネントがページ ジャンプおよびロールバック操作を実行する必要がある場合、uni.navigateTo、uni.redirectTo、およびその他のメソッドを通じて呼び出す必要があります。ただし、場合によっては、サブコンポーネントでもページのロールバック操作を実行する必要があり、この場合は uni.navigateBack メソッドを使用できます。サブコンポーネントで uni.navigateBack メソッドを呼び出すには、イベント トリガーに uni.$emit メソッドを使用する必要があります。たとえば、子コンポーネントでは次のように記述できます。
this.$emit('戻る');
親コンポーネントでは、このイベントをリッスンする必要があり、イベントがトリガーされたときに、uni.navigateBack メソッドを呼び出してページを返します。
<image @click="goback" class="familyReportarrow" src="/static/images/arrow.png" mode=""></image>
<script>
エクスポート デフォルト{ data(){ return{ } }、 メソッド:{ goback(){ console.log(111); uni.navigateBack({ デルタ: 1 }) } } } </script>