preface

Small contact WeChat program also have a period of time, to challenge yourself, and decided to try to copy a WeChat small procedures, and decided to write articles published, it study and communication with people, try to have been updated, until finish writing small programs, writing is not good or in need of improvement, to welcome you all pointed to communicate progress together. What I want to share with you today is the frame layout of qingju bike’s home page.

layout

To observe the original image

First of all, take a look at the home page of the official small programThe following results are obtained

  1. The entire page is arranged up and down
  2. The top navigation bar doesn’t have the default style that comes with the applet

3. The left and right sides of the page should have the same space from the margins, and the middle and lower parts should have the same background color. Some areas have the same pattern

layout

With that in mind, and in combination with the rest of the application’s pages, I decided to split the page into six sections, and the function and activity bars could be packed in a big box because they have the same background color and margins

implementation

Top navigation bar

The top navigation bar content styles of many pages of the official bike applet are roughly divided into two types. One is the navigation bar on the home page without a back button, and the other is the navigation bar with a back button as shown in the following figure. What needs to be considered is the difference in the background color of the navigation bar.With this in mind, I decided to create a custom top navigation bar component with good compatibility that controls the generation of specific navigation bars based on the data passed by the parent component. Considering that completing the applet may require several custom components, I’m going to create a special folder called “Components” in the root directory to place the custom components, and then create the applet’s first custom component called “topNav” there. Then reference the new topNav component in the. Json folder on the home page.

{ "usingComponents": { "topNav": ".. /.. /components/topNav/topNav" }, }Copy the code

Then there’s how to write our topNav component. The first thing we need to know is that the navigation bar at the top can be subdivided into the status bar at the top showing the time and the contents bar at the same level as the capsule buttonThe statusBarHeight of the status bar can be determined according to the API of wechat appletswx.getStorageSync()The navBarHeight is the same for all brands of mobile phones. The height of the interior bar (a custom variable) will vary depending on the brand of the mobile phone, but it is generally divided into two categories: Android and Android, 48px and 44px. As for the phone model, it can also be obtained according to the above API. So we can globally define a user object to specifically store user-related information, and then store height in it for convenience later calls

Wx.user = {} // Create a user object to store basic user information. Let info = wx.getSystemInfosync ()// Obtain user system information. // console.log(info) // Print it out Wx.user. statusBarHeight = info.statusbarheight // get the statusBarHeight if(info.platform === 'android'){// set the interior bar height based on the model wx.user.navBarHeight = 48 }else{ wx.user.navBarHeight = 44 }Copy the code

Then write topNav WXML structure, the structure is simple, I simply said, first of all in the outermost layout a view to install all of the content, and then placed two box at the same level in this view, a used to hold the content at the top of the navigation bar, a placeholder use, so need a placeholder piece, so This is because the top navigation bar needs to be fixed at the top of the page, and positioning will pull it out of the document flow, causing the following DOM structure to move forward, so we use a placeholder to take its place and eliminate the impact on the following DOM structure. Inside the box that holds the entire top navigation bar are two views, one for the status bar and one for the content bar, something like that

<view> <! -- placeholder block, <view style="height:{{topHeight}}px"> </view> <view class="container" style="background-color:{{backgroundColor}}"> <! - the status bar - > < view style = "height: {{statusBarHeight}} px" > < / view > <! - NaRongLan - > < view wx: if = "{{isIncludingisReturn}}" class = "two" style = "{{navBarStyle}}" > < image SRC = ".. /.. / image/left arrow. PNG "/ > {{content}} < / view > < view wx: else style =" {{navBarStyle}} "> {{content}} < / view > < / view > < / view >Copy the code

Since the top navigation bar has a return button with or without a return button, I simply define a variable “isIncludingisReturn” of type Boolean that can be passed through the parent component, Use the WX :if statement in the DOM structure to determine the style of the navigation bar by determining the value of “isIncludingisReturn”, and define some other variables to receive the values sent from the parent component.

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

Copy the code

We can define a navBarStyle variable in data, which uses ES6 concatenation to store height and other styles, and then upload them to the DOM. After that, we just need to pass values in the parent component. CSS styles in this plate are very simple, as long as the text is vertically centered, there are many options. Line-height, or elastic layout.

User Personal Information

The content of this section is relatively detailed, we can use the left and right layout to achieve, the left side to put text information, the right side to put pictures and view the privilege barBefore you write it again, notice that the left side of the text is the same spacing, so make sure that the spacing is the same as the magrin padding, But if you’re using padding do you need to set the layout of box-sizing to the inside margin and I’m using an elastic layout and I’m going to set the elastic layout from the outermost box, so that the box with the text and the image is directly on the same line, The nickname and rank in the same line is also implemented in the box containing them set the elastic layout, badges this small map with positioning implementation, underline can be above the box border-botom, view the privilege bar center display set align-item; Center can also be implemented using location, but there are many ways to implement it.

Message push bar

Messages in the notification bar jump every few seconds, which is easy to implement in a small application because of the Swiper component.

<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>
Copy the code

Call messageList from the data source, loop through it, and set the swiper properties slightly. Specific can check the official small program documentation, here the layout is also elastic layout

Green orange function bar

The layout and the orange activity bar below can be placed in a large box with a background color and padding value.Directly on the elastic layout,First cut a small box out, the rest with a loopFlex-wrap: wrap is used to wrap the outer box, and context-content is used to wrap the outer box. Space-between allows two boxes in the same row to be placed at both ends. If the width is set again, the gap in the middle of the two boxes will come out. Elastic layout is also used in a single small box, which is divided into left, middle and right.

Green orange activity center bar

Up and down layout, above the box to put the title text, below the specific activity box, around the layout of the activity box, text on the right side of the figure, is also the first to write a good style and then use circulation export. Other better implementation, the only difficult point is the inside of the box, the picture you will find that the inside of the picture it will overflow to like but below has been cut, the method to realize I put a box, is the most outside set to rectangular box, the background color to white, and then put the pictures in the among them, the size of the image the same as the size of the box, Set box border-radius to 50%, overflow: Hidden, make it round cut the bottom of the picture, and then use positioning to put a box with the same length and width as the width of the previous box, also set border-radius to 50%, give it a blue background color, put it in the bottom of the previous box, and set Z-index to cover the picture on the box, almost achieve the same effect

Bottom navigation bar

This official widget does not have tabBar, only the bottom navigation bar exists on the home page, and the bottom navigation bar is also fixed to the bottom. So as long as this page is implemented, I layout it like this, because there is a button in the middle, and all four headings are spaced equally to the left and right, so the elastic layout and context-content are placed on the outermost box first: In space-between, two boxes will be placed inside, and the two boxes will be placed on both sides, and then the elastic layout of each box will be set first, and then two boxes will be placed inside respectively to hold the title, and then the padding value and elastic vertical center of the small box for placing the title will be set. The button for scanning the TWO-DIMENSIONAL code will be realized by positioning. By nesting boxes, set the elastic layout of the box so that the box is vertically and horizontally centered. Then put the TWO-DIMENSIONAL code picture on the innermost box, and set a padding value. A shadow must be set outside the two-dimensional code to have the effect of shadow.

<view class="footer-bar"> <view class="bar bar-left"> <navigator class="footer-btn bar-mine" url=""> my </navigator> <navigator class="footer-btn bar-findcar "url=""> </navigator> </view> <view class="bar bar-right"> <navigator </navigator> </navigator class="footer-btn bar-more" url=""> </navigator> </view> </view> <view class="footer-bar__code"> <view class="code-box"> <image src=".. /.. PNG "/> </view> </view>Copy the code

Implementation effect

Something like that…

conclusion

The layout of this page is not difficult, it is very suitable for students who have just learned as a start, the most used or flexible layout, do not understand or have improved, welcome to leave a message in the comment area