微信小程序开发:2.小程序组件

常用的视图容器类组件

  1. View
    1. 普通的视图区域类似于div常用来进行布局效果
  2. scroll-view
    1. 可以滚动的视图,常用来进行滚动列表区域
  3. swiper and swiper-item
    1. 轮播图的容器组件和轮播图的item项目组件

View组件的基本使用

案例1

复制代码
<view class="container">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/**index.wxss**/
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container view:nth-child(1){
  background-color: lightblue;
}

.container view:nth-child(2){
  background-color: lightcoral;
}

.container view:nth-child(3){
  background-color: lightgreen;
}

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

案例2

复制代码
//纵向滚动
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

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

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

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

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

.container1 {
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

swiper和swiper-item组件的使用

复制代码
<swiper class="swiper-container" indicator-dots>
<!-- item one -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
<!-- item two -->
<swiper-item>
  <view class="item">B</view>
</swiper-item>
<!-- item three -->
<swiper-item>
  <view class="item">C</view>
</swiper-item>
</swiper>

/**index.wxss**/
.swiper-container{
  height: 300rpx;
}

.item{
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}

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

swiper-item:nth-child(2) .item{
  background-color: lightcoral;
}
swiper-item:nth-child(3) .item{
  background-color: lightcyan;
}

swiper常用属性

常用的基础内容组件

text

文本组件,类似于HTML中的span是一个行内元素

rich-text

富文本组件,支持吧HTML字符串渲染为WXML结构

Button

按钮组件,比html按钮丰富,了一通过open-type属性调用微信提供各种功能(客服、转发、获取用户授权、获取用户信息等)

复制代码
<!-- button组件的使用 -->
<view>通过type制定类型</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>---mini 小尺寸按钮------</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主调颜色按钮</button>
<button size="mini" type="warn">警告按钮</button>
<view>plain镂空按钮</view>
<button type="primary" plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button> 
<button type="warn">警告按钮</button>

image

图片组件,image默认宽度300px,高度240px

复制代码
<view>
  <image src="./img/photo.png" mode=""/>
</view>

image组件的mode属性用来制定图片的裁剪和缩放模式,常用mode属性值如下:

导航组件,类似于HTML中a标签

相关推荐
2501_915918411 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域2 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
低代码布道师7 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通11 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发11 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩12 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师12 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_9160088912 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214312 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview