【微信小程序 基本组件使用】

概要

1、画水平三个块

先写wxml有个大致的规划，然后去写wxss

• 预览
  
• wxml
  view是块元素

<view class="container1">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>

• wxss

.container1 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

.container1 view:nth-child(1) {
	background-color: aqua;
}

.container1 view:nth-child(2) {
	background-color: blueviolet;
}

.container1 view:nth-child(3) {
	background-color: chocolate;
}

.container1 {
	display: flex;
	justify-content: space-around;
}

2、三个块纵向滚动

• 预览
  
• wxml

<scroll-view class="container2" scroll-y>
	<view>A</view>
	<view>B</view>
	<view>C</view>
</scroll-view>

• wxss

.container2 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

.container2 view:nth-child(1) {
	background: cornflowerblue;
}

.container2 view:nth-child(2) {
	background: rgb(0, 230, 31);
}

.container2 view:nth-child(3) {
	background: rgb(228, 0, 216);
}

.container2 {
	border: 1px solid red;
	height: 160px;
	width: 100px;
}

3、轮播图

• 预览
  
• wxml
  注意如果直接用的是标签，那么不用加 ‘.’

<swiper class="swiper-container1" indicator-dots circular>
	<swiper-item>
		<view class="item">A</view>
	</swiper-item>
	<swiper-item>
		<view class="item">B</view>
	</swiper-item>
	<swiper-item>
		<view class="item">C</view>
	</swiper-item>
</swiper>

• wxss

.swiper-container1 {
	height: 150px;
}

.item {
	height: 100%;
	line-height: 150px;
	text-align: center;
}

swiper-item:nth-child(1) .item {
	background-color: gold;
}

swiper-item:nth-child(2) .item {
	background-color: darkorange;
}

swiper-item:nth-child(3) .item {
	background-color: deepskyblue;
}

• 备注 swiper 组件常用属性
  • 1、indicator-dots 是否展示小圆点
    
  • 2、指示点颜色
    
  • 循环 circular
  • 自动播放 播放间隔 autoplay interval=“3000”

4、文字支持长按选中

• 预览
  
• wxml

<view>
手机号支持长按选中，<text selectable>15666666666</text>
</view>

5、渲染ui的文本

• 预览
  
• wxml

<view>
	<rich-text nodes="<h1 style='color:red'>红色的标题</h1>"></rich-text>
</view>

6、button按钮的基本使用

• 预览
  
• wxml

<view>
	<button>默认按钮</button>
	<button type="primary">主色调按钮</button>
	<button type="warn">警告按钮</button>
</view>
<view>
	<button size="mini">缩小按钮</button>
	<button type="primary" size="mini">主色调按钮</button>
	<button type="warn" size="mini">警告按钮</button>
</view>
<view>
	<button size="mini" plain>镂空</button>
	<button size="mini" plain type="primary">主色调</button>
	<button size="mini" plain type="warn">警告</button>
</view>

7、image组件的基本使用

• 预览
  
  

• wxml

<view>
<image src="/images/1.png"></image>
</view>	

• image mode属性可以调整缩放模式

8、小程序提供的api类型