Sample code for making the homepage of WeChat development

This article describes how to create simple instances on the mini-app homepage. For more information about how to create simple instances on the mini-app homepage, see the following article, for more information, see

Simple example of mini-app homepage creation

Implementation:

First, the window attribute is set in a big way.

"NavigationBarBackgroundColor": "# AFE2E6", // bar background color "navigationBarTextStyle": "white", // bar font color "backgroundColor": "white ", // background color "enablePullDownRefresh": "true" // whether to refresh the drop-down list

TabBar attributes

The complete code is as follows (wxml)

 
  
   
    
     
1
    
    
     
Guangcong line 1
    
    
     
City bus passenger station-Conghua bus station
    
    
   
  
  
   
    
     
2
    
    
     
Guangcong line 2
    
    
     
Fangcun Bus Terminal-Conghua bus station
    
    
   
  
  
   
    
     
3
    
    
     
Guangcong line 3
    
    
     
Luochangwei bus station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
4
    
    
     
Guangcong Line 4
    
    
     
Tianhe passenger station-Conghua bus station
    
    
   
  
  
   
    
     
4
    
    
     
Guangcong 4-line
    
    
     
Tianhe passenger station-Conghua bus station
    
    
   
  
  
   
    
     
5
    
    
     
Guangcong Line 5
    
    
     
East Station Bus Terminal-Conghua bus station
    
    
   
  
  
   
    
     
6
    
    
     
Guangcong Line 6
    
    
     
Dongpu passenger station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
7
    
    
     
Guangcong Line 7
    
    
     
Huangpu passenger station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
8
    
    
     
Guangcong Line 8
    
    
     
Guangyuan bus station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
8
    
    
     
Guang Cong 8 Express line
    
    
     
Guangyuan bus station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
9
    
    
     
Guangcong Line 9
    
    
     
Longkou bus station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
10
    
    
     
Guangcong line 10
    
    
     
Yuexiu South Passenger Station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
10
    
    
     
Kuaishou 10
    
    
     
Yuexiu South Passenger Station-Conghua bus station
    
    
    
     
>
    
   
  
  
   
    
     
11
    
    
     
Guangcong Line 11
    
    
     
Haizhu automobile passenger station-Conghua bus station
    
    
   
  
 

Wxss

.waylist{display: flex;border-bottom: 1px solid gray;font-size: 13px;}.waylist view{height:40px;line-height: 40px;}.waylist .im{width: 25px;height: 25px;line-height: 25px;text-align: center;color:white;margin-top: 7.5px;margin-right: 5px;border-radius: 50px;margin-left: 5px;}.ste{color:gray;text-align: left;font-size: 12px;width: 60%;}.way{width: 30%;}.jian{text-align: right;font-size: 20px;color:gray;}.hidden{visibility: hidden;}image{margin-top:5px;}.im1{}.im2{}.im3{}.im4{}.im5{}.im6{}.im7{}.im8{}.im9{}.im10{}.im11{}

Json file

{"NavigationBarTitleText": "" // bar content}

Js files

Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page jump}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed },})

The above is the details of the sample code produced on the homepage of development. For more information, see other related articles on php Chinese network!