微信小程序组件学习(详细且简单易懂)

本文详述微信小程序的基础组件,包括view、text、icon、radio、image和swiper,阐述其特性和使用方法。同时讲解navigator导航、横向及纵向布局,并给出实例代码。最后总结学习内容,鼓励读者交流心得。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介:

通过本篇文章我们可以了解到
微信小程序常见组件的作用以及特性

基础常见组件

view

小程序中的view标签和我们web中的div标签很像

我们可以把它理解为小程序中的div标签

<view hover-class="h-class">
点击我试试
</view>

hover-class

属性默认值说明
hover-classnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-time50按住后多久出现点击态,单位毫秒
hover-stay-time400手指松开后点击态保留时间,单位毫秒

text

  1. ⽂本标签

  2. 只能嵌套text

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

  4. 可以对空格 回⻋ 进⾏编码

属性默认值说明
user-selectfalse文本是否可选,该属性会使文本节点显示为 inline-block
space显示连续空格
decodefalse是否解码

代码样式:

<text selectable="{{false}}" decode="{{false}}">&nbsp;</text>

icon

icon图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性必填说明
typeicon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizeicon的大小
coloricon的颜色,同css的color

radio

单选项目。

属性默认值说明
valueradio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value
checkedfalse当前是否选中
disabledfalse是否禁用
color#09BB07radio的颜色,同css的color

单选样式图:

在这里插入图片描述

代码:
js

Page({
  onShareAppMessage() {
    return {
      title: 'radio',
      path: 'page/component/pages/radio/radio'
    }
  },

  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },

  radioChange(e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value)

    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
    }

    this.setData({
      items
    })
  }
})

WXML

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">默认样式</view>
    <label class="radio">
      <radio value="r1" checked="true"/>选中
    </label>
    <label class="radio">
      <radio value="r2" />未选中
    </label>
  </view>


  <view class="page-section">
    <view class="page-section-title">推荐展示样式</view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

          <view class="weui-cell__hd">
            <radio value="{{item.value}}" checked="true"/>
          </view>
          <view class="weui-cell__bd">{{item.name}}</view>
        </label>
      </radio-group>
    </view>
  </view>
</view>

image

  1. 图⽚标签,image组件默认宽度320px、⾼度240px

  2. ⽀持懒加载

属性名类型默认值说明
srcString图⽚资源地址
modeString‘scaleToFill’图⽚裁剪、缩放的模式
lazy-loadBooleanfalse图⽚懒加载
  1. mode 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。

模式以及说明
scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

swiper轮播图(滑块视图容器)

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性默认值说明
indicator-dotsfalse是否显示面板指示点
indicator-colorrgba(0, 0, 0, .3)指示点颜色
indicator-active-color#000000当前选中的指示点颜色
autoplayfalse是否自动切换
circularfalse是否采用衔接滑动
interval5000自动切换时间间隔
verticalfalse滑动方向是否为纵向

swiper-item

滑块标签

默认宽度和⾼度都是100%

内部写入image

案例:

在这里插入图片描述

WXML

<!-- 
  1. 轮播图外层容器
  2. 每一个轮播项swiper-item
  3. swiper标签   存在默认样式
    1.width   100%
    2.height   150px
    3.swiper  高度 无法实现由内容撑开
  4. 先找出来 原图的宽度和高度  等比例  给swiper 定宽度和高度
    原图的宽度和高度  1125*352
    swiper宽度 / swiper高度  =  原图的宽度  /  原图的高度
    height: 100vw * 352 / 1152
 -->
<swiper autoplay interval="2000" circular indicator-dots="true">
  <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/18/O1CN01fboXpZ1C0HoAKlhdn_!!18-0-luban.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN012cOW0O1TfMo3z09sB_!!2206686532409-0-lubanimage.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"></image></swiper-item>
</swiper>

wxss

/* pages/index/index1.wxss */
swiper{
  width:100%;
  height:calc(100vw * 325 / 1125);
}
image{
  width: 100%;
}

注意

微信小程序全局支持class和style属性,不支持id属性


navigator导航

navigator导航用于页面链接跳转。

属性默认值说明
targetself在哪个目标上发生跳转,默认当前小程序
url当前小程序内的跳转链接
open-typenavigate跳转方式
hover-classnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果

open-type的合法值(有效值)

说明
navigate保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
redirect关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。
switchTab跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
reLaunch关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
navigateBack关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层
exit前的⻚⾯栈,决定需要返回⼏层 退出小程序,target="miniProgram"时生效

横向布局与纵向布局样式展示

在这里插入图片描述

WXML 😉

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

总结

今天我们学习了微信小程序的基础常用组件

view,text,icon,radio,image,swiper

navigator导航跳转

以及非常实用的横向布局纵向布局两种布局样式

这就是我们今天学习的内容了

欢迎在评论区互相分享自己的学习心得

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值