简介:
通过本篇文章我们可以了解到
微信小程序常见组件的作用以及特性
基础常见组件
view
小程序中的view标签和我们web中的div标签很像
我们可以把它理解为小程序中的div标签
<view hover-class="h-class">
点击我试试
</view>
hover-class
属性 | 默认值 | 说明 |
---|---|---|
hover-class | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | 400 | 手指松开后点击态保留时间,单位毫秒 |
text
-
⽂本标签
-
只能嵌套text
-
⻓按⽂字可以复制(只有该标签有这个功能)
-
可以对空格 回⻋ 进⾏编码
属性 | 默认值 | 说明 |
---|---|---|
user-select | false | 文本是否可选,该属性会使文本节点显示为 inline-block |
space | 显示连续空格 | |
decode | false | 是否解码 |
代码样式:
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
icon
icon图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性 | 必填 | 说明 |
---|---|---|
type | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
size | 否 | icon的大小 |
color | 否 | icon的颜色,同css的color |
radio
单选项目。
属性 | 默认值 | 说明 |
---|---|---|
value | radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value | |
checked | false | 当前是否选中 |
disabled | false | 是否禁用 |
color | #09BB07 | radio的颜色,同css的color |
单选样式图:
代码:
js
Page({
onShareAppMessage() {
return {
title: 'radio',
path: 'page/component/pages/radio/radio'
}
},
data: {
items: [
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'},
]
},
radioChange(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
const items = this.data.items
for (let i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value === e.detail.value
}
this.setData({
items
})
}
})
WXML
<view class="page-body">
<view class="page-section">
<view class="page-section-title">默认样式</view>
<label class="radio">
<radio value="r1" checked="true"/>选中
</label>
<label class="radio">
<radio value="r2" />未选中
</label>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view>
image
-
图⽚标签,image组件默认宽度320px、⾼度240px
-
⽀持懒加载
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 无 | 图⽚资源地址 |
mode | String | ‘scaleToFill’ | 图⽚裁剪、缩放的模式 |
lazy-load | Boolean | false | 图⽚懒加载 |
- mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
值 | 模式以及说明 |
---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
swiper轮播图(滑块视图容器)
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
属性 | 默认值 | 说明 |
---|---|---|
indicator-dots | false | 是否显示面板指示点 |
indicator-color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | #000000 | 当前选中的指示点颜色 |
autoplay | false | 是否自动切换 |
circular | false | 是否采用衔接滑动 |
interval | 5000 | 自动切换时间间隔 |
vertical | false | 滑动方向是否为纵向 |
swiper-item
滑块标签
默认宽度和⾼度都是100%
内部写入image
案例:
WXML
<!--
1. 轮播图外层容器
2. 每一个轮播项swiper-item
3. swiper标签 存在默认样式
1.width 100%
2.height 150px
3.swiper 高度 无法实现由内容撑开
4. 先找出来 原图的宽度和高度 等比例 给swiper 定宽度和高度
原图的宽度和高度 1125*352
swiper宽度 / swiper高度 = 原图的宽度 / 原图的高度
height: 100vw * 352 / 1152
-->
<swiper autoplay interval="2000" circular indicator-dots="true">
<swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/18/O1CN01fboXpZ1C0HoAKlhdn_!!18-0-luban.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN012cOW0O1TfMo3z09sB_!!2206686532409-0-lubanimage.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"></image></swiper-item>
</swiper>
wxss
/* pages/index/index1.wxss */
swiper{
width:100%;
height:calc(100vw * 325 / 1125);
}
image{
width: 100%;
}
注意
微信小程序全局支持class和style属性,不支持id属性。
navigator导航
navigator导航用于页面链接跳转。
属性 | 默认值 | 说明 |
---|---|---|
target | self | 在哪个目标上发生跳转,默认当前小程序 |
url | 当前小程序内的跳转链接 | |
open-type | navigate | 跳转方式 |
hover-class | navigator-hover | 指定点击时的样式类,当hover-class="none" 时,没有点击态效果 |
open-type的合法值(有效值)
值 | 说明 |
---|---|
navigate | 保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯ |
redirect | 关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。 |
switchTab | 跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯ |
reLaunch | 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯ |
navigateBack | 关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层 |
exit | 前的⻚⾯栈,决定需要返回⼏层 退出小程序,target="miniProgram" 时生效 |
横向布局与纵向布局样式展示
WXML 😉
<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>
总结
今天我们学习了微信小程序的基础常用组件
有view,text,icon,radio,image,swiper
和navigator导航跳转
以及非常实用的横向布局与纵向布局两种布局样式
这就是我们今天学习的内容了
欢迎在评论区互相分享自己的学习心得