[小程序]页面的构建

一、视图容器组件

①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组件

相关推荐
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld2 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄2 天前
mobx-miniprogram小程序的数据传输
小程序