小程序 常用组件

文章目录

  • 常见组件
    • view
    • text
    • image
    • swiper
    • navigator
    • rich-text
      • nodes属性
    • button
    • icon
    • from
    • radio
    • checkbox

常见组件

重点讲解⼩程序中常⽤的布局组件
view,text,rich–text,button,image,navigator,icon,swiper,radio,checkbox。 等

view

代替 原来的 div 标签

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

text

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制（只有该标签有这个功能）
  4. 可以对空格 回⻋ 进⾏编码
属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码
 <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

image

  1. 图⽚标签，image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
属性名类型默认值说明
srcString图⽚资源地址
modeString‘scaleToFill’图片剪裁，缩放的模式
lazy-loadBooleanfalse图片懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。

模式值说明
缩放scaleToFill不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放aspectFit保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放aspectFill保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。
缩放widthFix宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪top不缩放图⽚，只显⽰图⽚的顶部区域
裁剪bottom不缩放图⽚，只显⽰图⽚的底部区域
裁剪center不缩放图⽚，只显⽰图⽚的中间区域
裁剪left不缩放图⽚，只显⽰图⽚的左边区域
裁剪right不缩放图⽚，只显⽰图⽚的右边区域
裁剪top left不缩放图⽚，只显⽰图⽚的左上边区域
裁剪top right不缩放图⽚，只显⽰图⽚的右上边区域
裁剪bottom left不缩放图⽚，只显⽰图⽚的左下边区域
裁剪bottom right不缩放图⽚，只显⽰图⽚的右下边区域

swiper

微信内置轮播图组件
在这里插入图片描述

默认宽度 100% ⾼度 150px

属性名类型默认值说明
indicator-dotsBooleanfalse是否显⽰⾯板指⽰点
indicator-colorColorrgba(0, 0, 0, .3)指⽰点颜⾊
indicator-active-colorColor#000000当前选中的指⽰点颜⾊
autoplayBooleanfalse是否⾃动切换
intervalNumber5000⾃动切换时间间隔
circularBooleanfalse是否循环轮播

navigator

导航组件 类似超链接标签

属性名类型默认说明
targetStringself在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值self/miniProgram
urlString当前⼩程序内的跳转链接
open-typeStringnavigate跳转⽅式

open-type 有效值：

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

rich-text

富文本标签

可以将字符串解析成 对应标签，类似 vue中 v–html 功能

在这里插入图片描述

代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

nodes属性

nodes 属性⽀持 字符串 和 标签节点数组

属性说明类型必填备注
name标签名string是⽀持部分受信任的 HTML 节点
attrs属性object否⽀持部分受信任的属性，遵循 Pascal 命名法
children⼦节点列表array否结构和 nodes ⼀致

⽂本节点：type = text

属性说明类型必填备注
text⽂本string是⽀持entities
  • nodes 不推荐使⽤ String 类型，性能会有所下降。
  • rich–text 组件内屏蔽所有节点的事件。
  • attrs 属性不⽀持 id ，⽀持 class 。
  • name 属性⼤⼩写不敏感。
  • 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
  • img 标签仅⽀持⽹络图⽚。

button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>
属性说明类型必填备注
sizestringdefault否按钮的⼤⼩
typestringdefault否按钮的样式类型
plainbooleanfalse否按钮是否镂空，背景⾊透明
disabledbooleanfalse否是否禁⽤
loadingbooleanfalse否名称前是否带 loading 图标
form-typestring否⽤于 组件，点击分别会触发 组件的submit/reset 事件
open-typestring否微信开放能⼒

size 的合法值

值说明
default默认⼤⼩
mini⼩尺⼨

type 的合法值

值说明
primary绿⾊
default⽩⾊
warn红⾊

form-type 的合法值

值说明
submit提交表单
reset重置表单

open-type 的合法值

值说明
contact打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息，具体说明
share触发⽤⼾转发，使⽤前建议先阅读使⽤指引
getPhoneNumber获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明
getUserInfo获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting打开授权设置⻚
feedback打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

icon

属性类型默认值必填说明
typestring是icon的类型，有效值：success, success_no_circle,info, warn, waiting, cancel, download, search,clear
sizenumber/string23否icon的⼤⼩
colorstring否icon的颜⾊，同css的color

在这里插入图片描述

代码
js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

from

功能描述
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

属性说明

属性类型默认值必填说明
report-submitbooleanfalse否是否返回 formId 用于发送模板消息
report-submit-timeoutnumber0否等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmiteventhandle否携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreseteventhandle否表单重置时会触发 reset 事件
代码
<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch"/>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label><radio value="radio1"/>选项一</label>
          <label><radio value="radio2"/>选项二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>选项一</label>
          <label><checkbox value="checkbox2"/>选项二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value ></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="input" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
        <button style="margin: 30rpx 0" formType="reset">Reset</button>
      </view>
    </form>
  </view>

</view>

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

  data: {
    pickerHidden: true,
    chosen: ''
  },

  pickerConfirm(e) {
    this.setData({
      pickerHidden: true
    })
    this.setData({
      chosen: e.detail.value
    })
  },

  pickerCancel() {
    this.setData({
      pickerHidden: true
    })
  },

  pickerShow() {
    this.setData({
      pickerHidden: false
    })
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  }
})

效果
在这里插入图片描述

radio

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 radio-group ⼀起使⽤

checkbox

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 checkbox-group ⼀起使⽤

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/329971.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

医院网络安全建设：三网整体设计和云数据中心架构设计

医院网络安全建设：三网整体设计和云数据中心架构设计

医院网络安全问题涉及到医院日常管理多个方面&#xff0c;一旦医院信息管理系统在正常运行过程中受到外部恶意攻击&#xff0c;或者出现意外中断等情况&#xff0c;都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等&#xff0c;…
阅读更多...
Python 一行命令部署http、ftp服务

Python 一行命令部署http、ftp服务

Python 一行命令部署http服务 文章目录 Python 一行命令部署http服务具体操作命令如下浏览器返回下载Python 一行命令部署FTP服务 具体操作命令如下 这个比nginx相对来说更加简单&#xff0c;可以用于部署特殊场景时如银行等部署时&#xff0c;各种权限控制&#xff0c;内网之间…
阅读更多...
Base64编码原理解析

Base64编码原理解析

文章目录 一、Base64Base64编码的原理如下&#xff1a;以字符串"hello world"为例&#xff0c;它的ASCII码为&#xff08;下面&#x1f447;是ASCII码对照表&#xff09;&#xff1a;将这些ASCII码转换为二进制&#xff08;对照上表&#xff09;&#xff1a;将上述二…
阅读更多...
TCP 拥塞控制对数据延迟的影响

TCP 拥塞控制对数据延迟的影响

哈喽大家好&#xff0c;我是咸鱼 今天分享一篇文章&#xff0c;是关于 TCP 拥塞控制对数据延迟产生的影响的。作者在服务延迟变高之后进行抓包分析&#xff0c;结果发现时间花在了 TCP 本身的机制上面&#xff1a;客户端并不是将请求一股脑发送给服务端&#xff0c;而是只发送…
阅读更多...
uni-app的组件（二）

uni-app的组件（二）

多项选择器checkbox-group 多项选择器&#xff0c;内部由多个 checkbox 组成。 <checkbox-group><checkbox checked color"red" value"1"></checkbox> 篮球<!-- disabled:是否禁用 --><checkbox disabled color"rgba(0,0…
阅读更多...
设计模式-创建者模式

设计模式-创建者模式

1.单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一&#xff0c;此模式保证某个类在运行期间&#xff0c;只有一个实例对外提供服务&#xff0c;而这个类被称为单例类。 使用单例模式要做的两件事 1. 保证一个类只有一个实例 2.…
阅读更多...
ruoyi-cloud—若依微服务打包部署

ruoyi-cloud—若依微服务打包部署

1. 前端端口修改 2. 后端端口修改 &#xff08;1&#xff09;修改ruoyi-gateway服务中的bootstrap.yml的port端口 &#xff08;2&#xff09;修改ruoyi-ui中的vue.confing.js的target中的端口 3. 后端部署 (1) 在本地电脑上代码界面上打包后端 在ruoyi项目的bin目录下执行pa…
阅读更多...
最新内置30+远程接口,全新API接口管理系统PHP源码，附带系统搭建教程

最新内置30+远程接口,全新API接口管理系统PHP源码，附带系统搭建教程

搭建教程 内置30远程接口doc文件夹可参考自行编辑api文件夹里附赠qrcode接口源码 此程序基于ThinkPHP5.1 PHP版本需7.0-7.3之间。 Nginx请设置如下TP伪静态 Apache无需配置 运行目录默认即可 将程序上传至网站根目录,访问域名/install进行安装操作
阅读更多...
如何卸载旧版docker

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…
阅读更多...
GRU门控循环单元神经网络的MATLAB实现（含源代码）

GRU门控循环单元神经网络的MATLAB实现（含源代码）

在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;因其在处理序列数据方面的卓越能力而受到广泛关注。GRU&#xff08;门控循环单元&#xff09;作为RNN的一种变体&#xff0c;以其在捕捉时间序列长距离依赖关系方面的高效性而备受推崇。在本文中&#xff0c…
阅读更多...
【Redis】Redis如何做内存优化？

【Redis】Redis如何做内存优化？

​ &#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 ​ 目录 前言 正文 使用数据结构&#xff1a; 压缩对象&#xff1a; 过期策略&#xff1a; 分片&#xff1a; 使用持久化方式&#xff1a…
阅读更多...
【React】组件性能优化、高阶组件

【React】组件性能优化、高阶组件

文章目录 React性能优化SCUReact更新机制keys的优化render函数被调用shouldComponentUpdatePureComponentshallowEqual方法高阶组件memo 获取DOM方式refs如何使用refref的类型 受控和非受控组件认识受控组件非受控组件 React的高阶组件认识高阶函数高阶组件的定义应用一 – pro…
阅读更多...
高校学生选课系统源码开发方案

高校学生选课系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景 随着高校教育的发展&#xff0c;学生选课系统成为了高校管理中不可或缺的一部分。传统的手工选课方式存在着效率低下、易出错等问题&#xff0c;因此需要开发一款高效、便捷的高校学生选课系统。 &#xff08;二&…
阅读更多...
【机器学习】机器学习四大类第01课

【机器学习】机器学习四大类第01课

一、机器学习四大类 有监督学习 (Supervised Learning) 有监督学习是通过已知的输入-输出对&#xff08;即标记过的训练数据&#xff09;来学习函数关系的过程。在训练阶段&#xff0c;模型会根据这些示例调整参数以尽可能准确地预测新的、未见过的数据点的输出。 实例&#x…
阅读更多...
使用 vsCode创建GO项目

使用 vsCode创建GO项目

最近回顾了一下go的使用&#xff1a;具体操作看下面的参考连接&#xff0c;下面只描述一些踩过的坑&#xff1a; 1. go安装配置 安装go->配置go环境变量 推荐官网下载&#xff0c;速度很快&#xff1b; 这里需要配置五个参数&#xff1a;GOPATH/GOROOT/Path、GO111MODULE/…
阅读更多...
护眼台灯有AAA级吗？国家AA级护眼灯推荐

护眼台灯有AAA级吗？国家AA级护眼灯推荐

在当今这个时代&#xff0c;人们对于知识的需求越来越大。因此&#xff0c;很多的孩子在学业上也是非常的繁忙的&#xff0c;晚上做作业也成为了很多学生的“家常便饭”了&#xff0c;台灯已然成为了很多孩子在夜晚学习的“伙伴”。 然而&#xff0c;很多的家长对于孩子在台灯…
阅读更多...
Kali在Vmware无法连接到网络，配置网络及解决办法

Kali在Vmware无法连接到网络，配置网络及解决办法

一.问题描述&#xff1a; 打开 Kali&#xff0c;无法连接到网络&#xff0c;虚拟机配置正常的。 尝试 ping 百度&#xff0c;出错&#xff1a; ping baidu.com 提示&#xff1a; ping: baidu.com: Temporary failure in name resolution二.解决办法&#xff1a; 1.首先在vmwa…
阅读更多...
综述：自动驾驶中的 4D 毫米波雷达

综述：自动驾驶中的 4D 毫米波雷达

论文链接&#xff1a;《4D Millimeter-Wave Radar in Autonomous Driving: A Survey》 摘要 4D 毫米波 (mmWave) 雷达能够测量目标的距离、方位角、仰角和速度&#xff0c;引起了自动驾驶领域的极大兴趣。这归因于其在极端环境下的稳健性以及出色的速度和高度测量能力。 然而…
阅读更多...
开源的Immich自建一个堪比 iCloud 的私有云相册和备份服务

开源的Immich自建一个堪比 iCloud 的私有云相册和备份服务

最终效果展示 图片 视频 源码地址 GitHub - immich-app/immich: Self-hosted photo and video backup solution directly from your mobile phone. 1.创建目录 mkdir /data/immich && cd /data/immich 2.下载docker-compose文件和.env文件 wget https://github.c…
阅读更多...
TensorRT部署-Windows环境配置

TensorRT部署-Windows环境配置

系列文章目录 文章目录 系列文章目录前言一、安装Visual Studio &#xff08;2019&#xff09;二、下载和安装nvidia显卡驱动三、下载CUDA四、下载安装cuDNN五、安装Anaconda六、TensorRT安装七、安装Opencv八、Cmake 配置总结 前言 TensorRT部署-Windows环境配置 一、安装Vis…
阅读更多...
最新文章

Copyright @ 2022~2023