小程序组件库
小程序中,在wxml
中使用组件定义页面的结构。小程序提供了一套组件库。HTML5
标签都不能使用。
关于组件的属性
-
如果组件的属性为boolean类型属性,设置方式如下:
第一种方式: <view hover-stop-propagation></view> 写属性名就是true 不写为默认值
第二种方式 {{}}用于引用js字面量,设置boolean类型属性 <view hover-stop-propagation="{{true}}"></view>
-
在小程序中组件的属性名支持两种命名规则:
-
驼峰命名法
<view hoverStopPropagation="{{true}}"></view>
-
短横线命名法
<view hover-stop-propagation="{{true}}"></view>
-
View
组件
view
组件用于描述一个视图容器。类似html
中的div
。基本使用方法:
<view class="v1"
hover-class="v1-hover"
hover-start-time="50"
hover-stay-time="400">
<view class="v2"
hoverClass="v2-hover"
hoverStopPropagation="{{true}}" ></view>
</view>
案例:pages/view/view
。测试view
组件。
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
Image
组件
image
组件用于描述图片,基本写法:
<image src="图片路径"
mode="图像的裁切模式"
lazy-load="是否采用图片懒加载{{true}}"
show-menu-by-long-press="长按是否显示操作菜单"></image>
案例:pages/image/image
。
小程序中图片的适配
wxss
中提供了一个新的单位:rpx
(响应式像素)。它可以根据屏幕宽度的不同动态变化。在小尺寸屏幕下100rpx
转换的物理像素值比较小,在大尺寸屏幕下100rpx
转换的物理像素值比较大。这样就可以动态设置组件的大小。转换规则要保证如下原则:
无论任何屏幕,宽度永远都是750rpx
。 (类似100vw
)
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
swiper
组件
swiper
组件用于显示轮播图,基本结构:
<swiper indicator-dots="{{true}}"
indicator-active-color="#0f0c"
autoplay
current="2"
interval="3000"
duration="500"
circular
vertical
easing-function="default"
display-multiple-items="1">
<swiper-item>
<image src="..."></image>
</swiper-item>
.....
</swiper>
navigator
组件
navigator
组件用于跳转页面。基本写法:
<navigator url="/pages/login/login"
open-type="打开目标页面的方式">点我登录</navigator>
open-type:
navigate
默认的跳转方式,保留跳转。这种跳转方式,将会保留当前页,新建目标页,跳转到目标页(非tabar
页面)。navigateBack
返回上一页(本质就是销毁当前页,上一页自然而然的就显示出来了)。还可以借助于delta
属性,回到上n
页。redirect
意为:重定向。这种跳转方式将会销毁当前页,创建目标页,跳转到目标页(非tabbar
页面)。switchTab
意为:切换选项卡。这种跳转方式可以跳转到tabbar
页面。 但是将会销毁所有非tabbar
页面。reLaunch
意为重新启动小程序。这种方式将会销毁所有页面。重新打开新页面。
案例:
pages/a/a
pages/b/b
pages/c/c
ScrollView
组件
scrollView
组件属于容器类组件,特点是该容器拥有滚动条,并且针对滚动相关行为设计了很多人性化的属性、事件。
<scroll-view scroll-x="{{true}}"
scroll-y="{{true}}">
内容...
内容...
内容...
....
</scroll-view>
当容器装不下内容时,将会出现水平或垂直方向的滚动条。
案例:pages/scroll/scroll
input
组件
input
用于描述文本输入框,属于表单相关组件。基本写法:
<input value="输入框的内容"
type="输入框类型:text | idcard | number | digit "
password 是否为密码框
placeholder="占位文本"
disabled 是否禁用
maxlength 最大长度
confirm-type="提交类型,控制软键盘右下角按钮样式"/>
案例:pages/input/input