目录

view

scroll-view

swiper和swiper-item

text

rich-text

button

image

---

view

• 普通视图区域 块级元素 类似HTML的div

使用效果:

代码展示:

list.wxml

<view class="container1">
 
<view>Aview>
 
<view>Bview>
 
<view>Cview>
 
view>

list.wxss

/* pages/list/list.wxss */
 
.container1 {
 
display: flex;
 
justify-content: space-around;
 
}
 
.container1 view {
 
width: 5rem;
 
height: 5rem;
 
text-align: center;
 
line-height: 5rem;
 
}
 
.container1 view:nth-child(1){
 
background-color: pink;
 
}
 
 
.container1 view:nth-child(2){
 background-color: skyblue;
}
 
.container1 view:nth-child(3){ 
background-color: yellow; 
}

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表的效果

使用效果:

代码展示:

list.wxml

<scroll-view class="container1 container2" scroll-y>
 
<view>Aview>
 
<view>Bview>
 
<view>Cview>
 
scroll-view>

list.wxss 

/* pages/list/list.wxss */
.container1 {
  display: flex;
  justify-content: space-around;
}
.container1 view {
  width: 5rem;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
}
.container1 view:nth-child(1){
 background-color: pink;
}
 
.container1 view:nth-child(2){
  background-color: skyblue;
}
 
.container1 view:nth-child(3){
 background-color: yellow; 
}
.container2 {
  margin-top: 2rem;
  border: 1px solid red;
  // 必须给scroll-view 固定高度
  height: 6rem;
  width: 5rem;
}

swiper和swiper-item

• 轮播图容器组件 和 轮播图 item组件

更多了解属性

使用效果:

代码展示:

list.wxml

<swiper class="swiper-container" indicator-dots autoplay>
<swiper-item>
<view class="item">Aview>
swiper-item>
<swiper-item>
<view class="item">Bview>
swiper-item>
<swiper-item>
<view class="item">Cview>
swiper-item>
swiper>

 list.wxss

.swiper-container {
  height: 8rem;
}
.item {
  height: 100%;
  line-height: 8rem;
  text-align: center;
}
 
swiper-item:nth-child(1) .item{
 background-color: pink;
}
 
swiper-item:nth-child(2) .item {
  background-color: skyblue;
}
 
swiper-item:nth-child(3) .item {
 background-color: yellow; 
}

text

使用效果:

代码展示:

<view>
<text user-select="true">2015年1月，微信第一条朋友圈广告text>
<view>不可拷贝view>
view>

rich-text

使用效果:

代码展示:

<rich-text nodes="
hello world
">rich-text>

button

• 按钮组件
• 功能丰富
• 通过open-type属性可以调用微信提供的各种功能(获取用户授权,转发)

属性详情

使用效果:

代码展示:

<button>
默认按钮
button>
<button type="primary">主色调按钮button>
<button type="warn">警告button>
<view style="text-align: center;">=============view>
<button size="mini">
默认按钮
button>
<button type="primary" size="mini">主色调按钮button>
<button type="warn" size="mini">警告button>
<view style="text-align: center;">=============view>
<button plain>
默认按钮
button>
<button type="primary" plain>主色调按钮button>
<button type="warn" plain>警告button>

image

mode属性 用来指定图片的裁剪和缩放模式

使用效果:

代码展示: 

list.wxml

<image>image>
<image mode="widthFix" src="/images/team.jpg">image>

list.wxss

image {
  // 通过边框线证明image有默认的宽和高
  border: 1px solid pink;
}