基本组件

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>