基本组件

view

  • View标签类似于div标签
属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当hover-class="none" 时,没有点击态效果
1
<view hover-class="hover_class">index</view>
1
2
3
4
.hover_class{
background-color: aqua;
opacity: .5;
}

text

  • 显示普通的文本,text只能嵌套text
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
decode Boolean false 是否解码
1
2
3
4
<view>
<text selectable>index文本</text>
<text decode>&nbsp;</text>
</view>

image

  • 图片标签,image组件默认宽度320px、高度240px

注意:该标签其实是web中的图片标签和背景图片的结合! ! !并且不支持以前的web中的背景图片的写法! ! !

属性名 类型 默认值 说明
src String 图片资源地址,支持云文件ID (2.2.3起)
mode String scaleToFlil 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scoll-view下的image有效
1
2
3
4
<view>
<!--image是以前web中的img标签和背景图片的结合体-->
<image src="../../image/headerimg.png" mode="aspectFill"></image>
</view>

swiper

  • 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为
  • swiper默认宽度100%,高度150px。swiper-item默认宽度和高度都为100%
属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0.0.0.3)指示点颜色
indicator-active-color Color 000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
interval Number 5000 自动切换时间问隔
circular Boolean false 是否采用衔按滑动
1
2
3
4
5
6
<swiper autoplay indicator-dots indicator-color="white" indicator-active-color="red" circular interval="2000">
<swiper-item><image mode="widthFix" src="../../image/headerimg.png"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../image/headerimg.png"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../image/headerimg.png"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../image/headerimg.png"></image></swiper-item>
</swiper>

1
2
3
4
5
6
7
8
<!--保留当前页面,跳转到应用内的某个页面,但不能跳到tabbar页面-->
<navigator url="../index/index" open-type="navigate">跳到首页index</navigator>
<!--关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar页面-->
<navigator url="../index/index" open-type="redirect">跳到首页index</navigator>
<!--跳转到 tabbar页面,并关闭其他所有非tabbar页面-->
<navigator url="../index/index" open-type="switchTab">跳到首页index</navigator>
<!--关闭所有页面,打开到应用内的某个页面-->
<navigator url="../index/index" open-type="reLaunch">跳到首页index</navigator>

自定义组件

创建组件

  • 自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成
  • 在项目根目录创建componets文件夹,再创建组件MyHeader文件夹,然后右击点击【新建Component】即可生成json wxml wxss js 4个文件
  • 要编写一个自定义组件,首先需要在json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件):
1
2
3
{
"component": true
}
  • 修改MyHeader.wxml文件
1
2
3
4
5
6
<view class="my_Header">
{{cData}}
<view>
<slot> </slot>
</view>
</view>
  • 修改MyHeader.js文件
1
2
3
4
5
6
7
8
9
// components/MyHeader/MyHeader.js
Component({
properties: {
cData:{
value:"组件的默认值",
type:String
}
}
})
  • 修改MyHeader.wxss文件,添加样式
1
2
3
4
.my_Header{
font-size: 50px;
background-color: aqua;
}

至此一个MyHeader组件就已经定义完了

使用组件

  • 在需要引入组件的index.json中引入组件
1
2
3
4
5
{
"usingComponents": {
"MyHeader": "../../components/MyHeader/MyHeader"
}
}
  • index.wxml中使用组件标签,标签名为上面设置的MyHeader组件名
1
2
3
<view>
<MyHeader>页面</MyHeader>
</view>

事件绑定

  • bind绑定:事件绑定不会阻止冒泡事件
1
2
<!--data-xx可以绑定数据-->
<view bindtap="handleTap" data-id="1"></view>
1
2
3
4
5
6
7
8
9
handleTap(event){
const id = event.currentTarget.dataset.id
// event包含了当前点击的数据
console.log(event)
// 修改data中数据
this.setData({
key : value
})
}
  • catch绑定:事件绑定可以阻止冒泡事件
1
<view catchtap="handleTap"></view>