[小程序]页面的构建

news/2024/7/20 4:19:36 标签: 小程序

一、视图容器组件

①View

视图区域组件，类似于HTML中的div，可以用来按块实现页面布局效果，具体实例如下：

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

.dock view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.dock view:nth-child(1){
  background-color: lightblue;
}
.dock view:nth-child(2){
  background-color: lightcoral;
}
.dock view:nth-child(3){
  background-color: lightpink;
}

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

②scroll-view

可滚动视图区域，用来实现滚动列表效果，这里以纵向滚动为例

首先需要在上面的代码基础上更改控件类型，同时设置滚动方向为y

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

同时还需要在样式中指定高度（小于内容组件的高度之和），否则自适应会无法实现滚动效果

.dock{
  border: 1px solid red;
  height: 130px;
  width: 100px;
}

③swiper和swiper-item

轮播图组件，实现item轮播效果

首先需要放置父容器swiper，然后使用swiper-item放置内容。

<swiper class="dock" indicator-dots>
  <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>

需要注意的是，swiper-item中最好再放一个view组件用来进行精细排布

.dock{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightpink;
}
swiper-item:nth-child(2) .item{
  background-color: blue;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}

这里展示一些swiper常见的属性以供参考：

indicator-dots	是否显示指示点
indicator-color	指示点的颜色
indicator-active-color	当前选中的指示点颜色
autoplay	是否自动滚动
interval	自动滚动的时间间隔
circular	是否使用滑动动画

二、基础内容组件

①text

基础文本组件，类似于HTML的sapn标签，同时也可以是设置selectable来使得元素可以被长按选中(小程序中唯一的方法)

<view>
  你可以选中这段文字:
  <text selectable>1234567890</text>
</view>

②rich-text

富文本组件，支持将HTML渲染为WXML结构

<view>
  <rich-text nodes="<h1>标题</h1>"></rich-text>
</view>

三、交互组件

①button

按钮组件，可以通过open-type属性调用微信提供的服务（转发、获取用户权限/信息）

还可以通过type调整按钮的类型↑

  <button type="default">默认按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>

还可以通过size设置小尺寸按钮↓

<button type="default" size="mini">默认按钮</button>

还可以通过plain属性设置镂空按钮↓

<button type="default" plain>默认按钮</button>

②image

图片组件，默认宽300px，高240px

<image src="/src/images/hello.png"></image>

同时可以通过调整mode属性来设置图片的裁剪和缩放模式

scaleToFill	不保持长宽比，直接充满Image容器
aspectFit	保持长宽比自适应填充(保证长边)
aspectFill	保持长宽比，截取缩放(保证短边)
widthFix	宽度不变，高度自适应（保持长宽比）
heightFix	高度不变，宽度自适应（保持长宽比）

边框通过css文件设置