微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image

简介: 本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。

1. view组件

view组件就类似于html中的div标签

在这里插入图片描述

list.wxml

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

list.wxss

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

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

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

2. scroll-view 组件

scroll-view组件就是滚动的视窗,使用scroll-view组件时,要想横向滚动或者纵向滚动时,需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是,纵向滚动需要给scroll-view组件限定高度,横向滚动则需要给scroll-view组件添加一个限定的宽度。

在这里插入图片描述

list.wxml

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

list.wxss

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

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

.container1{
   
  justify-content: space-around;
  height: 150px;
  width: 100px;
  border: 1px solid red;
}

3. swiper 和 swiper-item 组件

swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件,swiper为轮播图的容器,swiper-item为轮播图的每一项。

在这里插入图片描述

其中swiper组件中的indicator-dots属性为是否在轮播图面板上显示指示点,若想显示,那么将其indicator-dots属性设置为true.

list.wxml

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

list.wxss

/* pages/list/list.wxss */
.swiper-container{
   
  height: 150px;
}

.item{
   
  height: 150px;
  line-height: 150px;
  text-align: center;
}


swiper-item:nth-child(1){
   
  background-color: lightgreen;
}
swiper-item:nth-child(2){
   
  background-color: lightpink;
}
swiper-item:nth-child(3){
   
  background-color: lightcoral;
}

3.1. swiper组件中的常用属性

在这里插入图片描述

官网地址【swiper组件】

4. text 和 rich-text组件

4.1. text组件

text为文本组件,类似于html中的span标签,也是一个行内元素

text组件一个常用的功能 :长按选中功能(text组件的selectbale属性)

在这里插入图片描述

list.wxml

<view>
  微信号:
  <text selectable>robin_zh</text>
</view>

4.2. rich-text 组件

rich-text 组件为富文本组件,它可以通过nodes属性将HTML字符串渲染为wxml结构

在这里插入图片描述

<rich-text nodes="<h1>HTML字符串</h1>"></rich-text>

5. button 组件

button组件,微信小程序为其提供了诸多属性,type ,size,plain…,同时button组件可以通过open-type属性调用微信提供的各种功能(客服,转发,获取用户权限,信息等)

在这里插入图片描述

<view>=====1.普通按钮,通过type来指定颜色======</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<view>=====2.迷你按钮,通过size来指定尺寸======</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>

<view>======3.镂空按钮,通过plain指定镂空======</view>
<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

6. image组件

image组件就和html中的img标签是完全一样的,只不过在微信小程序中的image组件即使没有图片也会默认占据一部分位置(大约300px*240px)

在这里插入图片描述

<image/>
<image src="./kl.jpg" />
/* pages/list/list.wxss */
image{
   
  border: 1px solid red;
  margin-bottom: 4px;
}

6.1. image的mode属性

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

mode属性的默认值为scaleToFill,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。

mode属性值的说明:

合法值 说明
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
top 裁剪模式,不缩放图片,只显示图片的顶部区域
bottom 裁剪模式,不缩放图片,只显示图片的底部区域
center 裁剪模式,不缩放图片,只显示图片的中间区域
left 裁剪模式,不缩放图片,只显示图片的左边区域
right 裁剪模式,不缩放图片,只显示图片的右边区域
top left 裁剪模式,不缩放图片,只显示图片的左上边区域
top right 裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域

相关文章
|
1月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
58 1
微信小程序:轻松实现时间轴组件
|
30天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
395 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
59 0
微信小程序:自定义关注公众号组件样式
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
52 1
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
177 1
|
1月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
53 1
|
1月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
48 0
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
504 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
110 7