各位小伙伴又见面啦,今天我们来学习微信小程序中包含但不限于使用的组件以及常见API。废话不多说,我们马上进入正题。
一,常见组件
组件是小程序应用中可缺失的一部分,就像吃羊头没有老马家的满口香椒盐的浇给,索然无味。
1,scroll-view
功能描述
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
- 横向滚动需打开 enable-flex 以兼容 WebView,如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
- 滚动条的长度是预估的,若直接子节点的高度差别较大,则滚动条长度可能会不准确
- 使用
worklet
函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。
2,swiper
功能描述
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
- 使用
worklet
函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。
3,view
重中之重!!!孩子们记住了(敲黑板)
功能描述
视图容器
示例代码
<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>
4,button
功能描述
按钮。
5,checkbox
功能描述
多选项目。
6,input
功能描述
输入框。
7,label
功能描述
用来改进表单组件的可用性。
使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for的优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
8,form
功能描述
表单。将组件内的用户输入的switch,input,checkbox,slider,radio,picker提交。
当点击form表单中form-type为submit的button组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name来作为key。
9,camera
功能描述
系统相机。扫码二维码功能。
10,image
功能描述
图片。支持JPG,PNG,SVG,WEBP,GIF,等格式。
- 使用svg格式且mode=scaleToFil时,WebView会居中。
- svg格式不支持百分比单位
- svg格式不支持<style>element
以上就是十种小程序中常用的组件,接下来我们将认识几种小程序中常见的API
二,常见API
1,wx.showToast(Object object)
功能描述
显示消息提示框。
2,wx.showLoading(Object object)
功能描述
显示加载的提示框。
3,wx.hideToast(Object object)
功能描述
隐藏消息提示框。
4,wx.hideLoading(Object object)
功能描述
隐藏加载提示框。
5,wx.startPullDownRefresh(Object object)
功能描述
开始下拉刷新,调用后触发下拉刷新动画,效果与手动下拉刷新一致。
以上就是微信小程序中常用的五种API