Basic components and navigation components of WeChat applets

This article mainly introduces the detailed introduction of basic components of applets and navigation components, for more information about the basic components and navigation components of applets, see the next article.

Detailed explanation of basic components and navigation components of applets:

1. basic components

1.1 icon

1.2 text

1.3 progress bar SS

2. navigator)

1. basic components

1.1 icon

(1) summary

Page. wxml

Page. js

// Obtain the var app = getApp () Page ({data: {iconType: ['success ', 'Success _ circle', 'Success _ on_circle', 'Waiting ', 'waiting _ circle ', 'safe _ success', 'safe _ warn', 'warn', 'info', 'info _ circle ', 'Circle', 'download ', 'Cancel', 'search', 'clear']},})

1.2 text

(1) case studies

Page. wxml

  
    
   
    {{text}}
    
   
    
   {{add}}  
   {{remove}} 
   
 

Page. js

// Obtain the application instance var app = getApp () // define an array of additional text content var extraLine = []; // initialize the text var init = 'initdata! \ N' Page ({data: {text: init, add: 'Add', remove: 'delete'},/** add a row of content */addLine: function (e) {extraLine. push ("This line is new add! ") This. setData ({text: init + extraLine. join ('\ n')},/** delete a row of content */removeLine: function (e) {if (extraLine. length> 0) {extraLine. pop () this. setData ({text: init + '\ n' + extraLine. join ('\ n ')})}},})

Page. wxss

.show-text{ font-size: 10pt; margin-left: 20rpx; font-family: 'Times New Roman', Times, serif; font-weight: bold;}.text-view{ padding: 10rpx;}button{ margin: 10rpx;}

1.3 progress bar SS

(1) summary

Page. wxml

Page. wxss

progress{ margin: 50rpx;}

2. navigator)

(1) summary

Main. wxml

  
  
   
Navigate to new page
   
  
   
Current page
   
  
   
Switch Tab
  
 

Main. wxss

.nav-hover{ color: white; background-color: black;}.nav-item{ margin: 20rpx; font-family: 'Times New Roman', Times, serif; font-weight: bold; padding: 10rpx; display: inline-flex;}

Navigator. wxml

 
  
Navigation to the new page
 

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more articles about basic components and navigation components of applets, please follow the PHP Chinese network!