[小程序]页面的构建

一、视图容器组件

①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文件设置

复制代码
.img{
  border: 1px solid red;
}

③navigator

页面导航组件,类似HTML的a组件

相关推荐
666HZ6665 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十6 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄6 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922446 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_6 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域6 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
拼图20912 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg66813 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通13 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~14 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作