微信小程序常用组件

已于 2023-02-09 15:26:21 修改
阅读量3k 收藏 9
点赞数 1
分类专栏： # 微信小程序 文章标签： 微信小程序 组件
于 2023-02-09 11:03:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128938234
版权

文章目录

微信小程序常用组件

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')
  },
})
xiangxiongfly915
关注
专栏目录
微信小程序常用控件汇总
陈正的博客
09-07 5011
1.图片标签： &lt;image src="/images/aaa.png"&gt;&lt;/image&gt; 2.文本标签： &lt;text&gt;Hello&lt;/text&gt; 3.swiper滑动轮播： &lt;swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots
微信小程序 --- 自定义组件
每天都要努力学习哦~~
02-27 3610
组件介绍小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。公共组件：将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护如果是公共组件，建议将其放在小程序的目录下的components文件夹中如果是页面组件，建议将其放在小程序对应页面目录下，当然你也可以放到页面的components文件夹中。
微信小程序开发组件和API（附源代码演示）
最新发布
qq_54015925的博客
08-13 1111
微信小程序开发组件和API（附源代码演示）
微信小程序控件
weixin_30299709的博客
06-12 381
1 scrollview 窗口view的滑动 <scroll-view scroll-y class='scroll-view-y' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrolltop}}"> <view id="gr...
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 6327
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
微信小程序组件详解
qq_44741577的博客
03-09 1358
微信小程序组件详解
微信小程序常用组件用法演示.rar
07-10
微信小程序常用组件用法及效果演示【源码】，对当前已支持的组件用法和效果进行演示，包括了视图容器、基础内容、表单组件、操作反愧导航组件、媒体组件等。这些组件在平时的微信小程序开发中，都是要用到的，另外还...
微信小程序日历组件（可多选单选）
01-13
微信小程序日历组件是开发微信小程序时常用的一种交互元素，它允许用户在日历视图中选择特定日期或时间段，通常用于预约、日程管理、时间选择等场景。本组件的特点在于其支持单选和多选模式，可以方便地进行日期操作...
微信小程序 select 下拉框组件功能
10-16
微信小程序select下拉框组件是小程序开发中常用的组件之一，用于在界面上提供用户选择的下拉菜单。它允许用户从预定义的选项列表中选择一个或多个值。本文将详细介绍微信小程序select组件的功能，并通过实例代码展示...
05-微信小程序常用组件-表单组件
感谢关注-最近在编写开源的自动化测试框架还没整理完
08-18 1439
1.表单组件 2.button按钮\案例代码 3.form表单\案例代码 4.image图片支持长按识别的码\案例代码
微信小程序的一些控件
08-29
小程序的demo方便程序员在写微信小程序时快速找去控件
微信小程序组件DEMO及案例
09-28
微信小程序组件DEMO及案例
微信小程序的组件
yang792508465的博客
03-25 8236
第五单元 小程序组件 一、昨日知识点回顾 1.小程序导航 2.上拉加载和下拉刷新的配置 3.小程序网络请求 4.异步api的promise化 二、本单元知识点概述 （Ⅰ）指定教材 无 （Ⅱ）知识点概述 （Ⅲ）教学时长 共4课时，180分钟 三、本单元教学目标 （Ⅰ）重点知识目标 1.组件的创建 2.组件通信 （Ⅱ）能力目标 1.掌握组件的创建 2.掌握组件通信 四、本单元知识详讲 5.1. 小程序组件 5.1.1 组件创建 在项目的根目录中，鼠标右键，创建 c
微信小程序-组件
m0_72694993的博客
09-21 420
4>swipe滑块视图容器，经常用这个组件做轮播图，属性较大部分都是常用的。一、组件（常用）（开发者文档中组件中更加详细）（和html中的标签一样）1.注意的是，所有组件名和属性都是小写的，多个单词用'-'连接。swiper-item是swiper中的组件。lazy-load（懒加载）当图片较多，需要开启。scrol-view:有可滚动的区域。详细属性在微信开发文档中的组件中对应寻找。view：和html中div相似。.image(图片组件)icon（图标）
微信小程序——组件
sssuan的博客
03-08 621
小程序中的组件是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
微信小程序之组件（一）
小淼淼的博客
09-29 1945
微信小程序之组件（一）
微信小程序（页面组件）
2303_79629194的博客
03-29 1610
组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图 基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。每一个组件都由一对标签组成，有开始台标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。<标签名 属性名="属性值">内容...</标签名>组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属。
微信小程序地图组件讲解与实战
在微信小程序中，地图组件是开发者常用的功能之一，它允许用户在应用内查看地图、进行位置导航等操作。以下是对地图组件的详细说明： 1. **地图组件引入**：在微信小程序中，地图组件（）需要在页面的json配置文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值