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

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool