微信小程序常用组件

news2025/6/9 19:19:13

文章目录

  • 微信小程序常用组件
    • button
    • icon
    • image
    • scroll-view
    • swiper
    • checkbox
    • audio
    • video

微信小程序常用组件

button

简单使用

在这里插入图片描述

wxml

<view class="container">
  <button type="default">default</button>
  <button type="default" size="mini">mini</button>
  <button type="primary">primary</button>
  <button type="warn">warn</button>
  <button type="default" plain="{{true}}">plain</button>
  <button type="default" disabled="{{true}}">disabled</button>
  <button type="default" loading="{{true}}">loading</button>
  <button open-type="contact">进入客服会话</button>
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="getUserInfo">获取用户信息</button>
  <view>
    <view>{{nickName}}</view>
    <image src="{{avatarUrl}}" style="width:100px;" mode="widthFix" />
  </view>
</view>

js

Page({
    getUserInfo(e) {
        console.log("errMsg: ");
        console.log(e.detail.errMsg)
        console.log("userInfo: ");
        console.log(e.detail.userInfo)
        console.log("rawData: ");
        console.log(e.detail.rawData)
        this.setData({
            nickName: e.detail.userInfo.nickName,
            avatarUrl: e.detail.userInfo.avatarUrl
        })
    }
})

icon

在这里插入图片描述

wxml

<view class="wrap">
  <block wx:for="{{iconList}}" wx:key="index">
    <icon type="{{item.iconType}}" size="{{iconSize}}" />
  </block>
</view>

js

Page({
  data: {
    iconList: [{
        iconType: "success"
      },
      {
        iconType: "success_no_circle"
      },
      {
        iconType: "info"
      },
      {
        iconType: "warn"
      },
      {
        iconType: "waiting"
      },
      {
        iconType: "cancel"
      },
      {
        iconType: "download"
      },
      {
        iconType: "search"
      },
      {
        iconType: "clear"
      },
    ],
    iconSize: 70,
    myColor: "red"
  }
})

image

在这里插入图片描述 wxml 
<view class="container">
  <view>原图</view>
  <image src="../../../images/cat.jpg" mode="" />
  <block wx:for="{{imageList}}" wx:key="index">
    <text>{{item.mode}}</text>
    <text>{{item.desciption}}</text>
    <image class="box" src="{{src}}" mode="{{item.mode}}" />
  </block>
</view>

wxss

image {
  margin: 5px;
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

js

Page({
  data: {
    src: "../../../images/cat.jpg",
    imageList: [{
        mode: "scaleToFill",
        desciption: "缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素	"
      },
      {
        mode: "aspectFit",
        desciption: "缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。	"
      },
      {
        mode: "aspectFill",
        desciption: "缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。	"
      },
      {
        mode: "widthFix",
        desciption: "缩放模式，宽度不变，高度自动变化，保持原图宽高比不变	"
      },
      {
        mode: "heightFix",
        desciption: "缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	"
      }
    ]
  }
})

scroll-view

属性类型默认值必填说明最低版本
scroll-xbooleanfalse否允许横向滚动1.0.0
scroll-ybooleanfalse否允许纵向滚动1.0.0
upper-thresholdnumber/string50否距顶部/左边多远时，触发 scrolltoupper 事件1.0.0
lower-thresholdnumber/string50否距底部/右边多远时，触发 scrolltolower 事件1.0.0
bindscrolleventhandle否滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}1.0.0
bindscrolltouppereventhandle否滚动到顶部/左边时触发1.0.0
bindscrolltolowereventhandle否滚动到底部/右边时触发1.0.0
upper-thresholdnumber/string50否距顶部/左边多远时，触发 scrolltoupper 事件1.0.0
lower-thresholdnumber/string50否距底部/右边多远时，触发 scrolltolower 事件1.0.0
refresher-enabledbooleanfalse否开启自定义下拉刷新2.10.1
bindrefresherrefresheventhandle否自定义下拉刷新被触发2.10.1
refresher-triggeredbooleanfalse否设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发2.10.1

wxml

<text>scoll-view垂直滚动</text>
<scroll-view style="height: 300px; width: 250px;" scroll-y="{{true}}" bindscroll="onScroll" bindscrolltoupper="scrollToUpper" bindscrolltolower="scrollToLower" upper-threshold="100" lower-threshold="100" refresher-enabled="{{true}}" bindrefresherrefresh="handleRefresh" refresher-triggered="{{isRefresh}}">
  <view class=" item">1111111</view>
  <view class="item">2222222</view>
  <view class="item">3333333</view>
  <view class="item">4444444</view>
  <view class="item">5555555</view>
</scroll-view>

wxss

.item {
  width: 100%;
  height: 300px;
}

js

// pages/elements/scrollview/scrollview.js
Page({
  data: {
    isRefresh: false
  },
  //滚动监听
  onScroll(e) {
    // console.log(e);
    // console.log(`
    // scroll-view宽高：${e.detail.scrollWidth}/${e.detail.scrollHeight}，
    // 滚动距离：${e.detail.scrollTop}
    // `);
  },
  //滑动到顶部
  scrollToUpper(e) {
    console.log("滑动到顶部");
  },
  //滑动到底部
  scrollToLower(e) {
    console.log("滑动到底部");
  },
  //下拉刷新
  handleRefresh() {
    console.log("下拉刷新了");
    setTimeout(() => {
      this.setData({
        isRefresh: false
      })
    }, 5000)
  }
})

swiper

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的 index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0

在这里插入图片描述

wxml

<button bindtap="handleAjax">请求数据</button>
<swiper indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="{{2000}}" style=" height: 416rpx;">
  <swiper-item wx:for="{{slideList}}" wx:key="index">
    <image src="{{item.imagePath}}" mode="widthFix" style="width:100%" />
  </swiper-item>
</swiper>

js

Page({
  data: {
    slideList: []
  },
  handleAjax() {
    wx.request({
      url: "https://www.wanandroid.com/banner/json",
      success: (res) => {
        this.setData({
          slideList: res.data.data
        })
      },
      fail: () => {
        console.log("请求失败");
      }
    })
  }
})

checkbox

属性类型默认值必填说明最低版本
valuestring否checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value1.0.0
disabledbooleanfalse否是否禁用1.0.0
checkedbooleanfalse否当前是否选中，可用来设置默认选中1.0.0
colorstring#09BB07否checkbox的颜色，同 css 的color1.0.0

在这里插入图片描述

wxml

<wxs src="./sum.wxs" module="sum" />
<view wx:for="{{dataList}}" wx:key="index" style="display: flex;justify-content: space-around;padding: 5px;">
  <checkbox bindtap="onClick" checked="{{item.isChecked}}" data-index="{{index}}" />
  <view>水果名：{{item.name}}</view>
  <view>单价：{{item.price}}</view>
  <view>数量：{{item.number}}</view>
</view>
<view style=" padding: 10px;">
  总价：{{sum(dataList)}}
</view>

js

Page({
  data: {
    dataList: [{
        id: 1,
        name: "苹果",
        number: 2,
        price: 20,
        isChecked: false
      },
      {
        id: 2,
        name: "梨子",
        number: 3,
        price: 30,
        isChecked: false
      },
      {
        id: 3,
        name: "草莓",
        number: 4,
        price: 40,
        isChecked: false
      },
      {
        id: 4,
        name: "西瓜",
        number: 5,
        price: 50,
        isChecked: false
      },
      {
        id: 5,
        name: "橘子",
        number: 6,
        price: 60,
        isChecked: false
      }
    ]
  },
  onClick(e) {
    let index = e.currentTarget.dataset.index
    this.data.dataList[index].isChecked = !this.data.dataList[index].isChecked
    this.setData({
      dataList: [...this.data.dataList]
    })
  }
})

wxs

function sum(list) {
  var total = 0
  for (var i = 0; i < list.length; i++) {
    if (list[i].isChecked) {
      total += list[i].price * list[i].number
    }
  }
  return total
}
module.exports = sum

audio

属性类型默认值必填说明最低版本
idstring否audio 组件的唯一标识符1.0.0
srcstring否要播放音频的资源地址1.0.0
loopbooleanfalse否是否循环播放1.0.0
controlsbooleanfalse否是否显示默认控件1.0.0
posterstring否默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效1.0.0
namestring未知音频否默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效1.0.0
authorstring未知作者否默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效1.0.0
binderroreventhandle否当发生错误时触发 error 事件，detail = {errMsg:MediaError.code}1.0.0
bindplayeventhandle否当开始/继续播放时触发 play 事件1.0.0
bindpauseeventhandle否当暂停播放时触发 pause 事件1.0.0
bindtimeupdateeventhandle否当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}1.0.0
bindendedeventhandle否当播放到末尾时触发 ended 事件1.0.0

在这里插入图片描述

wxml

<!--pages/elements/audio/audio.wxml-->
<view class="container">
  <audio src="{{audioData.src}}" name="{{audioData.name}}" author="{{audioData.author}}" poster="{{audioData.poster}}" controls="{{true}}" bindtimeupdate="onUpdate" bindplay="onPlay" bindpause="onPause" bindended="onEnd" action="{{audioAction}}"></audio>
  <button bindtap="clickPlayAudio">播放</button>
  <button bindtap="clickPauseAudio">暂停</button>
  <view>
    当前播放时间：{{currentTime}} 总时间：{{totalTime}}
  </view>
</view>

js

Page({
  data: {
    audioData: {
      src: "../../../audios/audio1.mp3",
      name: "我曾把完整的镜子打碎-柏松",
      author: "许嵩",
      poster: "../../../images/T002R300x300M000003rsKF44GyaSk.webp"
    },
    currentTime: 0,
    totalTime: 0,
    audioAction: {
      method: "pause"
    }
  },
  onUpdate(e) {
    this.setData({
      currentTime: parseInt(e.detail.currentTime),
      totalTime: parseInt(e.detail.duration)
    })
  },
  onPlay(e) {
    console.log("播放");
  },
  onPause(e) {
    console.log("暂停");
  },
  onEnd(e) {
    console.log("结束");
  },
  clickPlayAudio() {
    console.log("点击播放");
    this.setData({
      audioAction: {
        method: "play"
      }
    })
  },
  clickPauseAudio() {
    console.log("点击暂停");
    this.setData({
      audioAction: {
        method: "pause"
      }
    })
  }
})

video

在这里插入图片描述

wxml

<!--pages/elements/video/video.wxml-->
<view class="container">
  <video id="myVideoId" src="{{videoData.src}}" controls="{{true}}" muted="{{false}}" binderror="onVideoError" />
  <button bindtap="clickPlayVideo">播放</button>
  <button bindtap="clickPauseVideo">暂停</button>
</view>

js

Page({
  data: {
    videoData: {
      src: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    }
  },
  onVideoError(e) {
    console.log("视频错误");
    console.log(e);
  },
  clickPlayVideo() {
    this.videoContext.play()
  },
  clickPauseVideo() {
    this.videoContext.pause()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.videoContext = wx.createVideoContext('myVideoId')
  },
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

配置与管理Web服务器

配置与管理Web服务器

IIS是一个非常重要的Web服务器组件&#xff0c;包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器&#xff0c;分别用于网页浏览、文件传输、新闻服务和邮件发送。 Web服务的工作原理 HTTP是应用级的协议&#xff0c;主要用于分布式、协作的信息系统。HTTP协议是通用的、无状…
阅读更多...
第二章：创建虚拟机

第二章：创建虚拟机

创建Windows server&#xff1a;首先第一步就是打开我们的vm&#xff0c;然后找到上一章讲的主页图标创建新的虚拟机。点击这上面类似的&#xff0c;然后转站。博文地址&#xff1a;https://blog.csdn.net/ryduijftgvhj/article/details/127934939?spm1001.2014.3001.5502视频…
阅读更多...
工作进入第七年，开始幻想四十岁的生活

工作进入第七年，开始幻想四十岁的生活

2022年度总结&#xff0c;推迟了一些时间&#xff0c;但终究还是来了&#xff0c;忙里偷闲。 突然发现自己很久没有更新文章了&#xff0c;主要是因为自己换了部门&#xff0c;调整了技术方向&#xff0c;对于新技术不知道该怎么写。 2022年&#xff0c;那就依旧从工作、生活…
阅读更多...
今天面了一个来华为要求月薪25K，明显感觉他背了很多面试题...

今天面了一个来华为要求月薪25K，明显感觉他背了很多面试题...

最近有朋友去华为面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…
阅读更多...
Pywirt：一款基于Python的Windows安全应急响应工具

Pywirt：一款基于Python的Windows安全应急响应工具

关于Pywirt Pywirt是一款基于Python开发的网络安全工具&#xff0c;该工具专门针对Windows操作系统设计&#xff0c;可以帮助广大研究人员使用winrm并通过在Windows操作系统上收集各种信息来加快安全事件应急响应的速度。 该工具已在Windows 10操作系统上进行过完整测试。 功…
阅读更多...
DVWA—CSRF 跨站请求伪造

DVWA—CSRF 跨站请求伪造

注意&#xff1a; 1、这里对XSS(Stored)关卡不熟悉的可以从这里去看http://t.csdn.cn/ggQDK 2、把难度设置成low 一、概述 1、定义 跨站请求伪造&#xff0c;攻击者利用服务器对用户得新人&#xff0c;从而欺骗受害者去服务器上执行受害者不知晓得请求。 2、场景 攻击者会伪…
阅读更多...
Fluid-数据编排能力原理解析

Fluid-数据编排能力原理解析

前言本文对Fluid基础功能-数据编排能力进行原理解析。其中涉及到Fluid架构和k8s csi driver相关知识。建议先了解相关概念&#xff0c;为了便于理解&#xff0c;本文使用JuiceFS作为后端runtime引擎。原理概述Fuild数据编排能力&#xff0c;主要是在云原生环境中&#xff0c;能…
阅读更多...
FEC原理与操作及BigTao机框装机说明

FEC原理与操作及BigTao机框装机说明

一、FEC原理与操作​ 1.FEC 原理简介 ​ 前向纠错&#xff08;英语&#xff1a;forward error correction&#xff0c;缩写FEC&#xff09;或信道编码&#xff08;英语&#xff1a;channel coding&#xff09;是一种在单向通信系统中控制传输错误的技术&#xff0c;通过连同数…
阅读更多...
2023年十款开源测试开发工具推荐！

2023年十款开源测试开发工具推荐！

今天为大家奉献一篇测试开发工具集锦干货。在本篇文章中&#xff0c;将给大家推荐10款日常工作中经常用到的测试开发工具神器&#xff0c;涵盖了自动化测试、性能压测、流量复制、混沌测试、造数据等。 1、AutoMeter-API 自动化测试平台 AutoMeter 是一款针对分布式服务&…
阅读更多...
环境变量与命令行参数详解

环境变量与命令行参数详解

问题引入 ​ 我们先来看一段简单的死循环代码&#xff1a; int main() {while(1){printf("i am running!\n");sleep(1);}return 0; }​ 我们将其运行编译并生成为可执行文件 myproc &#xff0c;当我们要运行它的时候&#xff0c;都得在这个可执行文件前面加一个 .…
阅读更多...
【C++】 类和对象 （下）

【C++】 类和对象 （下）

文章目录&#x1f4d5;再谈构造函数1. 构造函数体赋值2. 初始化列表3. explicit 关键字&#x1f4d5;static 成员1. 概念2. static 成员变量3. static 成员函数&#x1f4d5; 友元1. 友元函数2. 友元类&#x1f4d5;内部类&#x1f4d5;编译器优化&#x1f4d5;再谈构造函数 1…
阅读更多...
Python traceback模块：获取异常信息

Python traceback模块：获取异常信息

除了使用 sys.exc_info() 方法获取更多的异常信息之外&#xff0c;还可以使用 traceback 模块&#xff0c;该模块可以用来查看异常的传播轨迹&#xff0c;追踪异常触发的源头。下面示例显示了如何显示异常传播轨迹&#xff1a;classSelfException(Exception): pass defmain(): …
阅读更多...
linux 学习（持续更新）

linux 学习（持续更新）

一&#xff1a;初识linux 新装操作环境&#xff1a; mac intel电脑 CentOS系统版本&#xff1a;CentOS-8.1.1911 在这里解释一下[chenllocalhost /]$这句话的含义&#xff1a; chenl是用户名&#xff0c;也就是你自己起的名字。 是分割的符号 localhost是主机名&#xff0c;也…
阅读更多...
轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）

轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）

概述 对象存储&#xff08;Cloud Object Storage&#xff0c;COS&#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务&#xff0c;用户可通过网络随时存储和查看数据。个人账户首次开通COS可以免费领取50GB 标准存储容量包6个月&#xff08;180天&#xff09;的额度。…
阅读更多...
VBA提高篇_19 可选参数Optional_ IsMissing _MSgbox

VBA提高篇_19 可选参数Optional_ IsMissing _MSgbox

文章目录1. 可选参数Optional2.IsMissing判断参数是否提供,只能判断变体类型3. 使用 : 可以按参数名传递参数 a:1,c:34.Msgbox 常用参数5.VBA颜色常量表1. 可选参数Optional Optional 代表本参数是可选项 False ; 代表参数若不指定,则默认为False Function mySumProduct(r As R…
阅读更多...
2023年rabbitMq面试题汇总3（5道）

2023年rabbitMq面试题汇总3（5道）

一、如何确保消息不丢失&#xff1f;消息持久化的前提是&#xff1a;将交换器/队列的durable属性设置为true&#xff0c;表示交换器/队列是持久交换器/队列&#xff0c;在服务器崩溃或重启之后不需要重新创建交换器/队列&#xff08;交换器/队列会⾃动创建&#xff09;。如果消…
阅读更多...
【监控】Prometheus(普罗米修斯)监控概述

【监控】Prometheus(普罗米修斯)监控概述

文章目录一、监控系统概论二、基础资源监控2.1、网络监控2.2、存储监控2.3、服务器监控2.4、中间件监控2.5、应用程序监控&#xff08;APM&#xff09;三、Prometheus 简介3.1、什么是 Prometheus3.2、优点3.3、组件3.4、架构3.5、适用于什么场景3.6、不适合什么场景四、数据模…
阅读更多...
weston 2: 登录后直接启动weston配置

weston 2: 登录后直接启动weston配置

本人Kubuntu版本是22.04 名词&#xff1a;SDDM&#xff08;SDDM - Arch Linux 中文维基&#xff09;显示管理器 配置流程如下&#xff1a; 1.修改配置文件 a.配置.bashrc vim ~/.bashrc //以下内容删除 #export WLD$HOME/install #export LD_LIBRARY_PATH$WLD/lib/x86_64-…
阅读更多...
使用IntelliJ IDEA搭建datax-web开发环境

使用IntelliJ IDEA搭建datax-web开发环境

记录&#xff1a;372场景&#xff1a;使用IntelliJ IDEA搭建datax-web开发环境&#xff0c;以及datax-web基本使用。版本&#xff1a;JDK 1.8Python 2.7.5datax-web开源地址&#xff1a;https://github.com/WeiYe-Jing/datax-web1.配置Maven环境1.1安装目录目录&#xff1a;D:\…
阅读更多...
Spring6-基于XML自动装配

Spring6-基于XML自动装配

一、介绍自动装配&#xff1a;根据指定的策略&#xff0c;在IOC容器中匹配某一个bean&#xff0c;自动为指定的bean中所依赖的类类型或接口类型属性赋值二、创建controllerpackage com.wsy.auto.controller;import com.wsy.auto.service.UserService; import com.wsy.auto.serv…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023