


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
(2) Case
Effect screenshot
<view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="40"/> </block> </view>page.js
//获取应用实例 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 text
(1) Case
Rendering
## 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='Initdata! \n' Page({ data:{ text:init, add:'添加', remove:'删除' }, /* *添加一行内容 */ addLine:function(e){ extraLine.push("This line is new add!") this.setData({ text:init+extraLine.join('\n') }) }, /* *删除一行内容 */ 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 progress
(2)Case
page.wxml
<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) Case
Rendering
main.wxml
<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: 'Times New Roman', 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 English version
Recommended: Win version, supports code prompts!

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.