微信小程序的常用组件

这篇具有很好参考价值的文章主要介绍了微信小程序的常用组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、常用的视图容器类组件

① view

② scroll-view

③ swiper 和 swiper-item

二、常用的基础内容组件

① text

② rich-text

三、其它常用组件 

① button

② image

③ navigator


一、常用的视图容器类组件

① view

  • 普通视图区域
  • 类似于 HTML 中的 div,是一个块级元素
  • 常用来实现页面的布局效果

微信小程序的常用组件

属性 说明
text-align 用来设置元素中的的文本对齐方式.只对文本有效,对元素无效,不能设置元素的对齐方式;
line-height 行高,当line-height=height,文字居中
display:flex 弹性盒:它决定一个盒子在其它盒子中的分布,以及如何处理可用的空间。使用该模型,可以轻松的创建"自适应"浏览器窗口的流动布局。
justify-content 属性 说明
flex-start 排列在当前行的最左边
flex-end 排列在当前行的最右边
center 排列在当前行的中间位置
space-between 间距相等排列,两边不留白
space-around 间距相等排列,两边留白等于间距的一半

first.wxml

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

first.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: lightskyblue;
}

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

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

② scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

 微信小程序的常用组件

second.wxml

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

second.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: lightskyblue;
}

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

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

③ swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图 item 组件 

微信小程序的常用组件

属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动

third.wxml

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

third.wxss

.swiper-container {
  height: 150px;
}

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

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

swiper-item:nth-child(2) .item {
  background-color: lightblue;
}

swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

二、常用的基础内容组件

① text

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

通过 text 组件的 selectable 属性,实现长按选中文本内容的效果: 

微信小程序的常用组件

fouth.wxml 

<view>
  手机支持长按选中效果
  <text selectable>13800005006</text>
</view>

② rich-text

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

 通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构:

微信小程序的常用组件

fifth.wxml

<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

三、其它常用组件 

① button

  • 按钮组件
  • 功能比 HTML 中的 button 按钮丰富
  • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

微信小程序的常用组件

sixth.wxml 

<button>默认的按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

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

<button size="mini" plain>默认的按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

② image

  • 图片组件 image
  • 组件默认宽度约 300px、高度约 240px

微信小程序的常用组件

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

mode 值

说明

scaleToFill

(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

aspectFit

缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,

可以完整地将图片显示出来。

aspectFill

缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,

图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

widthFix

缩放模式,宽度不变,高度自动变化,保持原图宽高比不变

heightFix

缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

seventh.wxml

<image></image>
<image src="/images/1.jpg"></image>

 seventh.wxss

image {
  border: 1px solid red;
}

③ navigator

  • 页面导航组件
  • 类似于 HTML 中的 a 链接

微信小程序的常用组件 

属性名

类型

默认值

说明

navigationBarTitleText

String

字符串

导航栏标题文字内容

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色,如 #000000

navigationBarTextStyle

String

white

导航栏标题颜色,仅支持 black / white

 1.设置导航栏的标题

设置步骤:app.json -> window -> navigationBarTitleText 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示:

微信小程序的常用组件 

2. 设置导航栏的背景色

设置步骤:app.json -> window -> navigationBarBackgroundColor 需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b ,效果如图所示:

微信小程序的常用组件 

 3.设置导航栏的标题颜色

设置步骤:app.json -> window -> navigationBarTextStyle 需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示:

微信小程序的常用组件 

注意: navigationBarTextStyle 的可选值只有 black 和 white

微信小程序开发文档:view | 微信开放文档 (qq.com)

分享我创建的学习笔记网站:George's Notes (gitee.io)文章来源地址https://www.toymoban.com/news/detail-506779.html

到了这里,关于微信小程序的常用组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 05-微信小程序常用组件-表单组件

    05-微信小程序常用组件-表单组件 微信小程序包含了六大组件: 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。 其中,视图容器组件包括view和scroll-view等,用于实现页面的

    2024年02月12日
    浏览(44)
  • 04-微信小程序常用组件-基础组件

    04-微信小程序常用组件-基础组件 微信小程序包含了六大组件: 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。 其中,视图容器组件包括view和scroll-view等,用于实现页面的

    2024年02月12日
    浏览(39)
  • 微信小程序的常用组件

    目录 一、常用的视图容器类组件 ① view ② scroll-view ③ swiper 和 swiper-item 二、常用的基础内容组件 ① text ② rich-text 三、其它常用组件  ① button ② image ③ navigator ① view 普通视图区域 类似于 HTML 中的 div,是一个块级元素 常用来实现页面的布局效果 属性 说明 text-align

    2024年02月11日
    浏览(46)
  • 微信小程序常用表单组件

       button 为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交。其属性表如下所示。 代码示例:    checkbox 为复选框组件,常用于在表单中进行多项数据的选择。复选框的 checkbox-group 为父控件,其内部嵌套若干个 checkbox 子控件。    checkbox-group 属性如

    2024年02月09日
    浏览(40)
  • 微信小程序——常用组件的属性介绍

    text 文本组件 类似于HTML中的span标签,是一个行内元素 rich-text 富文本标签 支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性,实现长按选中文本内容的效果。只有text标签支持长按选中效果,其他的组件是不支持的 结构内容代码: view class=\\\"text-

    2024年02月07日
    浏览(65)
  • 微信小程序的页面制作---常用组件及其属性2

    在全局配置文件app.json中添加taBar配置,可实现标签栏配置。标签栏最少2个,最多5个 (1)如何配置标签栏? 1》先建多个文件,(以我的index,list,myform文件夹为例) 2》在app.json这个全局配置文件里面配置taBar,(必填taBar配置项——color、selectedColor、backgroundColor、list) 3》

    2024年04月13日
    浏览(40)
  • UniApp、微信小程序、Vue常用的UI组件

    在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。 MintUI是饿了么团队开发基于vue.js的移动端UI框架,它包含丰富的CSS和JS组件,能够满足日常的移动端开发需要。 官网地址:

    2024年02月12日
    浏览(44)
  • 08-微信小程序视图层

    08-微信小程序视图层 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。 将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。 WXSS(We

    2024年02月11日
    浏览(37)
  • 微信小程序 - 视图与逻辑 介绍

    什么是页面导航 在小程序开发中,页面导航是指在不同页面之间进行切换的过程。通过页面导航,用户可以在小程序中流畅地浏览不同的内容和功能模块。 小程序中实现页面导航的两种方式 在小程序中,实现页面导航有两种主要方式:声明式导航和编程式导航。 1、页面导

    2024年01月17日
    浏览(37)
  • 微信小程序视图层莫名出现”竖线“

    写完视图层后,发现页面上莫名其妙的出现了一些“竖线”,如下图所示: 这段html代码是这样写的: css样式是这样的: 真机调试也找不到 “竖线” 的元素,但是显示其就是 section 上的一部分。那看来这竖线应该不是自己添加了,如果是自己添加的,在真机调试的时候元素

    2024年02月12日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包