《微信小程序开发实战》学习笔记Chapter04 基本组件

Chapter04 基本组件

1. view

官方文档地址：view | 微信开放文档

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

2. text

官方文档地址：text | 微信开放文档

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选 (已废弃)
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

3. image

官方文档地址：image | 微信开放文档

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

<view>
    <image src="../../image/index/imagesx.jpg" mode="aspectFit">        
    </image>
</view>

效果如下图：

4. swiper（轮播组件）

官方文档地址：swiper | 微信开放文档

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
display-multiple-items	number	1	否	同时显示的滑块数量
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

<!-- pages/index4/index4.wxml -->
<swiper autoplay="{{true}}" indicator-dots="{{true}}" indicator-active-color="#000000" circular="{{true}}" interval="1000">
    <swiper-item>
        <image src="../../image/index/swiper1.jpg" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../image/index/swiper2.jpg" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../image/index/swiper3.jpg" mode="aspectFill"></image>
    </swiper-item>
</swiper>

效果如下图：

---

5. navigator（导航组件）

官方文档地址：navigator | 微信开放文档

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式

//跳转到非tabbar页面
<!--pages/index5/index5.wxml-->
<navigator url="../index4/index4"  open-type="navigate">
    index4
</navigator>
​
//跳转到tabbar页面
<navigator url="../index1/index1"  open-type="switchTab">
    index1
</navigator>

6. video

官方文档地址：video | 微信开放文档

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0）
duration	number		否	指定视频时长
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	Array.<object>		否	弹幕列表
danmu-btn	boolean	false	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	boolean	false	否	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	boolean	false	否	是否自动播放
loop	boolean	false	否	是否循环播放
muted	boolean	false	否	是否静音播放

​