イミテーション2020グリーンオレンジ自転車アプレットホームページフレームワークレイアウト

序文

レイアウトのアイデア

原画を観察

公式アプレットのホームページイメージを最初に見てみると、次のような結果が得られます。

1. ページ全体が上下にレイアウトされています。
2. 上部のナビゲーション バーは、アプレットに付属するデフォルトのスタイルではありません。
3. ページの左右全体が外側の余白から同じ間隔になり、中段と下段の背景色が同じになります
4. 地域によっては同じスタイルも存在

レイアウト

これらの観察を念頭に置いて、アプレットの他のページと合わせて、私はページを6つのセクションに分割することにしました。ファンクションバーとアクティビティセンターバーは同じ背景色と同じ外側の余白を持っているので、1つの大きなボックスに収まります。

実現

トップナビゲーションバー

自転車アプレットの多くのページの公式トップナビゲーションバーは2種類のコンテンツスタイルに分かれており、1つは戻るボタンのないこのナビゲーションバーのホームページであり、もう1つは戻るボタンのあるこのナビゲーションバーの次のイメージであり、また、ナビゲーションバーの異なる背景色を考慮する必要があります。以上のことを考慮して、親コンポーネントから渡されたデータに従って特定のナビゲーションバーの生成を制御できる、互換性の高いトップナビゲーションバーコンポーネントをカスタマイズすることにしました。アプレットを完成させるためにいくつかのコンポーネントをカスタマイズする可能性があることを考慮して、カスタムコンポーネントを保持するためにルートディレクトリに「components」という名前のフォルダを作成し、「topNav」という名前のアプレットの最初のカスタムコンポーネントを作成し、ホームページの.jsonフォルダで新しく作成したtopNavコンポーネントを参照することにします。

{
 "usingComponents": {
 "topNav": "../../components/topNav/topNav"
 },
}

 wx.user = {} // 新しいユーザー・オブジェクトを作成し、ユーザーの基本情報を格納する
 let info = wx.getSystemInfoSync()//ユーザーのシステムに関する情報を得る
 // console.log(info) // プリント可能
 wx.user.statusBarHeight = info.statusBarHeight // ステータスバーの高さを取得する
 if(info.platform === 'android'){ // コンテンツバーの高さを設定するモデルを決定する
 wx.user.navBarHeight = 48
 }else{
 wx.user.navBarHeight = 44
 }

次に、topNavのwxml構造を記述するために、この構造は比較的単純ですが、私は簡単にアイデアを説明します、まず第一に、すべてのコンテンツをロードするビューの一番外側のレイアウトで、次に、ボックスの2つの同じレベルを配置するために、このビューで、1つは、トップナビゲーションバーのコンテンツ全体をロードするために使用され、1つは、 プレースホルダの使用を取る ために使用され、我々はこのようなプレースホルダが必要な理由は、トップナビゲーションバーを使用するためです。このプレースホルダが必要な理由は、トップナビゲーションバーは、常にページの最上部に固定されるように固定配置されなければならず、位置決めを使用すると、ドキュメントの流れから外れてしまい、背後のdom構造が前方に移動してしまうため、このプレースホルダを使用して位置を確保し、背後のdom構造への影響を排除するためです。トップナビゲーションバーのコンテンツを含むボックスの中に、ステータスバーとコンテンツバーを含む2つのビューを配置します。

<view>
 <!-- プレースホルダー・ブロック、ドキュメント・フローから外れたトップ・ナビゲーション・バーをトッピングする--。>
 <view style="height:{{topHeight}}px">
 </view>
 <view class="container" style="background-color:{{backgroundColor}}">
 <!-- ステータスバー -- その>
 <view style="height:{{statusBarHeight}}px"></view>
 <!-- コンテンツバー--その>
 <view wx:if="{{isIncludingisReturn}}" class="two" style="{{navBarStyle}}">
 <image src="../../image/ .png"/>
 {{content}}
 </view>
 <view wx:else style="{{navBarStyle}}">{{content}}</view>
 </view>
</view>

トップのナビゲーションバーはリターンボタンの有無でスタイルが変わるので、単純に親コンポーネントから渡される変数 「isIncludingisReturn 」をboolean型でカスタマイズし、dom構造のwx:if文を使って「isIncludingisReturn」の値を判定してナビゲーションバーのスタイルを決定するように定義しました。その他、親コンポーネントから渡された値を受け取るための変数をいくつか定義しています。

 properties: {
 isIncludingReturn:{
 type: Boolean,
 value: false
 },
 backgroundColor:{
 type: String,
 value: ''
 },
 content:{
 type: String,
 value: ''
 },
 textColor:{
 type: String,
 value:''
 }
 },

あなたは、データのnavBarStyle変数を定義することができ、ES6ステッチを介して、その中に格納されている高さといくつかの他のスタイルを取得し、その後、domにそれを渡す その後、単に行の親コンポーネントの値を渡す、このボードのCSSスタイルは非常にシンプルで、テキストが垂直方向に中央にある限り、選択する多くの方法があり、ラインハイトを設定したり、柔軟なレイアウトすることができます。

ユーザーの個人情報

このボードの内容は比較的良いですが、あなたが達成するために、左右のレイアウトを使用することができ、左はテキスト情報を置くために、右は写真やビューの特典バーを置くために、その後、上下のスペーシングの左側のテキストコンテンツに注意を書き込むと同じですが、均一であるように間隔を設定するために注意を書き込む方法の実現magrinパディングを使用することができますが、ボックスサイズ変換を設定する必要があることに注意してパディングの使用でこの作品のレイアウトの内側の余白のために私はセット弾性レイアウトの開始時にボックスの外側から弾性レイアウトを使用するので、テキスト情報やイメージを含むボックスが直接同じ行に、ニックネームや実現と同じ行のレベルは、それらを含むボックスにも弾性レイアウトを設定し、アンダーラインの実現の位置決めとこの小さなアイコンのバッジは、ボックスのボーダーボトム、ビューの特権ストリップの上にすることができます中央揃え表示設定align-item;センター、また、位置決めで達成することができ、要するに達成するために多くの方法があります。

メッセージプッシュバー

メッセージ・プッシュバーのメッセージは数秒おきにジャンプしますが、スワイパー・コンポーネントがあるので、アプレットで実装するのはまだ簡単です。

<swiper class="pushMessage" autoplay interval="3000" duration="200" vertical="true" circular="true">
 <block wx:for="{{messageList}}" wx:key="index">
 <swiper-item>
 <view class="message-box">{{item.content}}</view>
 </swiper-item>
 </block>
 </swiper>

データソースデータからmessageListを呼び出し、ループトラバーサルを使用し、少し行のスイーパーの基本プロパティを設定します。詳細については、アプレットの公式ドキュメントをチェックすることができますし、ここでのレイアウトも柔軟なレイアウトです。

クレメンタイン・ファンクション・バー

この作品と次の緑のオレンジ色の活動バーのレイアウトは、直接大きなボックスとすることができ、その後、大きなボックス内の背景色とパディング値を設定します。直接伸縮性のあるレイアウトで、最初に小さなボックスを切り取り、達成するためにループと他は、ここではフレックスラップを設定するには、ボックスの外側に多くの注意です：ラップは、それが改行されるようにするには、justify-contentがあります：スペース間ので、両端の同じ行の2つのボックスは、幅の幅は、その後少しを設定し、単一のうち2つのボックスの真ん中にギャップ小さなボックスにも直接弾性レイアウトで、左-中央-右に分割され、アルギン-アイテム：センター垂直中央に配置されます。

グリーンオレンジ・アクティビティ・センター・バー

上下のレイアウトは、ボックスの上部にタイトルのテキストを置くために、次のボックスの特定の活動を置くために、ボックスの左右のレイアウトの活動、マップの右側のテキストの左側にも、良いスタイルを書いて、エクスポートするサイクルを使用します。達成するために、他の比較的良いですが、唯一のより困難なボックス内のイメージですが、あなたはオーバーフローされますが、下のイメージはカットされているようなものです、私はメソッドを達成するために最もボックスの外側に、ボックスが長方形として設定され、背景色は白であり、その後、その中にイメージを入れて、イメージのサイズとボックスのサイズが同じであり、その後、ボックスの境界半径を設定します。50％、overflow：hiddenは、イメージの下部をカットするためにそれを丸くし、その後、位置決めを使用して、長さと幅とボックスの幅がボックスと等しく、また、50％にborder-radiusを設定し、彼に青い背景色を与え、ボックスの底部に入れ、その後、z-indexを設定することにより、イメージがボックスをカバーするように、ほとんどまた、この効果を達成することができます！

下のナビゲーションバー

この公式アプレットは、タブバーがなく、この下部のナビゲーションバー全体にホームページだけが存在し、下部のナビゲーションバーも下部の位置が固定されているはずです。だから、限り、このページが行に達成するために、私はこのようなレイアウトは、真ん中にボタンを置くために、左右の間隔の4つのタイトルが同じであるため、まず第一に、レイアウトの弾力性に一番外側のボックスの最初のように、正当化-コンテンツ：スペース-間、2つのボックスの内側に、2つのボックスは確かに1つの左と右の両側に配置され、各ボックスまず、弾性レイアウトを設定し、内部とそれぞれタイトルの2つのボックスを置き、その後、小さなボックスのパディング値と弾性垂直方向の中心のタイトルを設定し、ボックスの入れ子ボックスを介して、達成するために位置決めとQRコードボタンをスキャンし、ボックスは、ボックスが垂直方向と水平方向の中心であるように弾性レイアウトを設定し、その後、QRコードのイメージを配置するために最も内側のボックスは、同時に、パディング値を設定し、QRコードの外側に、影の効果を持つように、影を設定する必要があり影の効果を持つように影を設定します。

<view class="footer-bar">
 <view class="bar bar-left">
 <navigator class="footer-btn bar-mine" url=""></navigator>
 <navigator class="footer-btn bar-findCar" url=""> </navigator>
 </view>
 <view class="bar bar-right">
 <navigator class="footer-btn bar-parkingArea" url=""> </navigator>
 <navigator class="footer-btn bar-more" url=""> </navigator>
 </view>
</view>
<view class="footer-bar__code">
 <view class="code-box">
 <image src="../../image/ .png" />
 </view>
</view>

実現効果

今もそんな感じですよね？