当前位置:   article > 正文

【微信小程序】一文带你吃透开发中的常用组件_微信小程序组件

微信小程序组件

写在前面

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为了9大类,分别是:

 1.视图容器    2.基础内容    3.表单组件        
 4.导航组件    5.媒体组件    6.地图组件        
 7.画布组件    8.开放能力    9.无障碍访问
  • 1
  • 2
  • 3

现只举例部分常用组件,大部分可以看官方文档组件部分,不再做过多赘述。


1. view 组件

  1. 在小程序中,通常使用<view/>代替<div/>作为容器来做布局

    <!--pages/welcome/welcome.wxml-->
    <view class="container">
      <image class="avatar" src="/images/测试.jpg"></image>
      <text>Hello</text>
      <!-- <button>微信小程序</button> -->
      <view>
        <text>微信小程序</text>
      </view>
    </view>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

2. text 组件

  1. ⽂本标签

  2. 只能嵌套text

  3. ⻓按⽂字可以复制(只有该标签有这个功能)–>selectable

  4. 可以对如: 空格回车&nbsp; 进⾏编码 -->decode

属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码

例:通过 text 组件的user-select 属性,可以实现长按选中文本内容的效果。

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述


3. image 组件

  1. 图⽚标签,image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应

  2. ⽀持懒加载

属性名类型默认值说明
srcString图⽚资源地址
modeStringscaleToFill图⽚裁剪、缩放的模式
lazy-loadBooleanfalse图⽚懒加载
  1. mode模式列举:
模式说明
缩放scaleToFill不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放aspectFit保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。
缩放aspectFill保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来
缩放widthFix宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变
裁剪top不缩放图⽚,只显⽰图⽚的顶部区域
裁剪bottom不缩放图⽚,只显⽰图⽚的底部区域
裁剪center不缩放图⽚,只显⽰图⽚的中间区域
裁剪left不缩放图⽚,只显⽰图⽚的左边区域
裁剪right不缩放图⽚,只显⽰图⽚的右边区域
裁剪top lefttop right
bottom leftbottom right
不缩放图⽚,只显示值所指向区域
  1. 代码示例:
  <image class="avatar"  mode="aspectFit" src="/images/测试.jpg"></image>
  • 1

4. button 组件

小程序中的按钮组件类似于HTML中的按钮组件,同时可以调用微信提供的丰富的功能,例如:获取用户信息,获取用户授权,转发等。

例:使用type属性设置按钮的类型:

<button >默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
  • 1
  • 2
  • 3

在这里插入图片描述

例:使用size属性设置按钮的大小:

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
  • 1
  • 2
  • 3

在这里插入图片描述

例:使用plain属性设置镂空按钮:

<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>
  • 1
  • 2
  • 3

在这里插入图片描述


5. swiper 和 swiper-item 组件

利用这两个组件可以实现轮播图效果:

wxml代码:

<swiper class="swiper-container">
<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

wxss代码:

.swiper-container{
  height:150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: aquamarine;
}
swiper-item:nth-child(2) .item{
  background-color: azure;
}
swiper-item:nth-child(3) .item{
  background-color: darkorange;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

实现效果:
请添加图片描述
swiper组件的常用属性

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示色
indicator-colorcolorrgba(0,0,0,3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点的颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动

例:显示面板指示色:

<swiper class="swiper-container" indicator-dots="true" >
  • 1

在这里插入图片描述

例:指定指示点颜色和当前选中知识点颜色:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red">
  • 1

在这里插入图片描述

例:设置自动切换,间隔设置为1s:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000">
  • 1

在这里插入图片描述

采用衔接滑动:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>
  • 1

在这里插入图片描述


在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/583849
推荐阅读
相关标签
  

闽ICP备14008679号