search
HomeWeChat AppletMini Program DevelopmentWeChat Mini Program Basic Components and Navigation Components

This article mainly introduces relevant information about the detailed introduction of the basic components and navigation components of the WeChat Mini Program. Friends in need can refer to the following

Detailed explanation of the basic components and navigation components of the WeChat Mini Program:

1. Basic components

1.1 Icon

1.2 Text

1.3 Progress bar progress

2. Navigation component (navigator)

1. Basic component

1.1 icon icon

(1) Summary

WeChat Mini Program Basic Components and Navigation Components

(2) Case

Effect screenshot

WeChat Mini Program Basic Components and Navigation Components

## page.wxml

<view class="type-group">
 <block wx:for="{{iconType}}">
  <icon type="{{item}}" size="40"/>
 </block>
</view>

page.js

//获取应用实例
var app = getApp()
Page({
 data:{
 iconType:[
  &#39;success&#39;,&#39;success_circle&#39;,&#39;success_on_circle&#39;,&#39;waiting&#39;,&#39;waiting_circle&#39;,&#39;safe_success&#39;,&#39;safe_warn&#39;,&#39;warn&#39;,&#39;info&#39;,
  &#39;info_circle&#39;,&#39;circle&#39;,&#39;download&#39;,&#39;cancel&#39;,&#39;search&#39;,&#39;clear&#39;
 ]
 },
})


## 1.2 text text

(1) Case

Rendering


WeChat Mini Program Basic Components and Navigation Components## page.wxml

<view class="main">
 <view class="text-view">
  <text class="show-text">{{text}}</text>
 </view>
 <view class="bt-view">
  <button bindtap="addLine" class="show-text">{{add}}</button>
  <button bindtap="removeLine" class="show-text">{{remove}}</button>
 </view> 
</view>

page.js

//获取应用实例
var app = getApp()
//定义额外的文本内容数组
var extraLine = [];
//初始化文本
var init=&#39;Initdata! \n&#39;
Page({
 data:{
 text:init,
 add:&#39;添加&#39;,
 remove:&#39;删除&#39;
 },
/*
*添加一行内容
 */
addLine:function(e){
 extraLine.push("This line is new add!")
 this.setData({
  text:init+extraLine.join(&#39;\n&#39;)
 })
},
/*
*删除一行内容
 */
removeLine:function(e){
 if (extraLine.length > 0) {
  extraLine.pop()
  this.setData({
  text:init + &#39;\n&#39; + extraLine.join(&#39;\n&#39;)
  })
 }
},
})

page.wxss

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

1.3 Progress bar progress

(1) Summary

WeChat Mini Program Basic Components and Navigation Components

(2)Case

Rendering


page.wxmlWeChat Mini Program Basic Components and Navigation Components

<view class="progress-view">
 <progress percent="50"/>
 <progress percent="20" stroke-width="10" show-info/>
 <progress percent="40" color="#000"/>
 <progress percent="100" active/>
</view>

page.wxss

progress{
 margin: 50rpx;
}

## 2. Navigator (navigator)

(1) Summary

(2) CaseWeChat Mini Program Basic Components and Navigation Components
Rendering


main.wxml
WeChat Mini Program Basic Components and Navigation Components

<view class="nav-view">
 <navigator open-type="navigate" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">导航到新页面</navigator>
 <navigator open-type="redirect" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">当前页面</navigator>
 <navigator open-type="switchTab" url="../index/index" class="nav-item" hover-class="nav-hover">切换Tab</navigator>
</view>

main.wxss

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

navigator.wxml

<view class="info">导航到的新页面</view>

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more articles related to WeChat applet basic components and navigation components, please pay attention to the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.