目次
序文
小さなプログラムはネイティブではなくユニアプリで書かれています
WeChat アプレット
コード
Pages.json ファイルで構成されます
重要なポイント: "navigationStyle": "custom", // ナビゲーション バーのスタイル
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
// 开始下拉刷新
"enablePullDownRefresh": true,
// 上拉触底的距离
"onReachBottomDistance": 150
}
},ホームページの vue ファイル
レンプレート
<view class=" " :style="{'height':topHeight+'px'}"></view>脚本
data中定义
topHeight: 20,
onLoad(){
const {
height,
top
} = uni.getMenuButtonBoundingClientRect();
this.topHeight = height + top
}
述べる：
高さ: カプセルの高さです
Alipay アプレット
ホーム プロフィール
ページ.json ファイル
重要: "transparentTitle": "always", // ナビゲーション バーの透明設定
{
"path": "pages/home/home",
"style": {
"transparentTitle": "always",
// "navigationBarTitleText": "首页",
// "navigationStyle": "custom",
// 开始下拉刷新
"enablePullDownRefresh": true,
// 上拉触底的距离
"onReachBottomDistance": 150
}
},ホームビューページ
レンプレート
<view :style="{'height':topHeight+'px'}" />
<view :style="{'height':titleHeight+'px'}" style="text-align: center;">你好</view>脚本
data中 定义
topHeight: 20,
titleHeight: 0,
onLoad 中
const {
height,
top
} = uni.getMenuButtonBoundingClientRect();
this.topHeight = top // 顶部到胶囊的高度 54
this.titleHeight = height // 胶囊的高スタイル
二次メニューページの構成
追加するだけです
"navigationBarTitleText": "サイトの詳細"
{
"root": "subpkg",
"pages": [{
"path": "service/service",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "站点详情",
"transparentTitle": "always",
"onReachBottomDistance": 150
}
},詳細ページのスタイル 詳細ページの vue ファイルは、デバイスの幅と高さのプロパティを取得する必要はありません。
要約する
違う
1. WeChat アプレットは、pages.json でナビゲーション バーのスタイルを構成します。
"ナビゲーションスタイル": "カスタム"
Alipay アプレットは、pages.json でナビゲーション バーの透明度を構成します。
"transparentTitle": "常に",
2. ナビゲーション バーのタイトル テキストの内容を構成する
"navigationBarTitleText": "サイトの詳細",
WeChat アプレットがナビゲーション バー スタイルを構成した後にこのプロパティを構成すると、タイトル テキストのコンテンツがページに表示されません。
Alipay アプレットは、ページ上にタイトル テキスト コンテンツを表示するようにこのプロパティを設定します (第 2 レベルのページにある場合は、前のレベルに戻るための矢印も表示されます)。
同じ
ナビゲーションバーの上部をカプセルの上部に合わせる方法とカプセルの高さは同じです