Cao Note

外观

组件 ​

组件的概念 ​

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考组件文档。

什么是组件：

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
html
<tagname property="value">Content goes here ...</tagname>
<tagname property="value">Content goes here ...</tagname>

注意：所有组件与属性都是小写，以连字符-连接

公共属性 ​

任何一个组件都可以写的属性

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发的事件时，会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件

特殊属性 ​

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

视图容器组件 ​

swiper/swiper-item 滑块视图容器 ​

wxml

jsx
<view class="container">
  <swiper
    autoplay="{{true}}"
    interval="1000"
    circular="{{true}}"
    previous-margin="30"
    next-margin="30"
    bindchange="_change"
  >
    <swiper-item wx:for="{{banner}}" wx:key="*this">
      <image src="../../static/banners/{{item}}" />
    </swiper-item>
  </swiper>
  <view class="dots">
    <text wx:for="{{banner}}" wx:key="*this" class="{{index==currentIndex?'active':''}}"></text>
  </view>
</view>
<view class="container">
  <swiper
    autoplay="{{true}}"
    interval="1000"
    circular="{{true}}"
    previous-margin="30"
    next-margin="30"
    bindchange="_change"
  >
    <swiper-item wx:for="{{banner}}" wx:key="*this">
      <image src="../../static/banners/{{item}}" />
    </swiper-item>
  </swiper>
  <view class="dots">
    <text wx:for="{{banner}}" wx:key="*this" class="{{index==currentIndex?'active':''}}"></text>
  </view>
</view>

wxss

jsx
.container {
  position: relative;
}
.dots {
  position: absolute;
  bottom: 20rpx;
  z-index: 10;
  width: 100%;
  text-align: center;
}
.dots text {
  display: inline-block;
  width: 30rpx;
  height: 10rpx;
  margin: 5rpx 10rpx;
  background-color: #ccc;
}
.dots text.active {
  background: blue;
}
.container {
  position: relative;
}
.dots {
  position: absolute;
  bottom: 20rpx;
  z-index: 10;
  width: 100%;
  text-align: center;
}
.dots text {
  display: inline-block;
  width: 30rpx;
  height: 10rpx;
  margin: 5rpx 10rpx;
  background-color: #ccc;
}
.dots text.active {
  background: blue;
}

js

js
Page({
  _change: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  }
})
Page({
  _change: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  }
})

scroll-view 可滚动视图区域 ​

wxml

jsx
<scroll-view class="scroll-x" scroll-x="{{true}}">
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
</scroll-view>

<scroll-view class="scroll-y" scroll-y="{{true}}">
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
</scroll-view>
<scroll-view class="scroll-x" scroll-x="{{true}}">
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
</scroll-view>

<scroll-view class="scroll-y" scroll-y="{{true}}">
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
        <view>导航一</view>
</scroll-view>

wxss

jsx
.scroll-x {
  white-space: nowrap;
}
.scroll-x view {
  display: inline-block;
  padding: 10rpx;
  margin: 10rpx;
  background: #ccc;
}
.scroll-y {
  height: 600rpx;
}
.scroll-y view {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 10rpx;
  background: #ccc;
}
.scroll-x {
  white-space: nowrap;
}
.scroll-x view {
  display: inline-block;
  padding: 10rpx;
  margin: 10rpx;
  background: #ccc;
}
.scroll-y {
  height: 600rpx;
}
.scroll-y view {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 10rpx;
  background: #ccc;
}

原生组件 native-component ​

原生的组件层级不受 z-index 限制，普通组件 z-index 设置多大，不会超过原生的组件

cover-view 覆盖在原生组件之上的文本视图 ​

jsx
<map class="map">
  <cover-view bindtap="_open" src="../../static/tabs/cart.png"></cover-view>
</map>
<map class="map">
  <cover-view bindtap="_open" src="../../static/tabs/cart.png"></cover-view>
</map>

cover-image 覆盖在原生组件之上的图片视图 ​

jsx
<map class="map">
  <cover-image bindtap="_open" src="../../static/tabs/cart.png"></cover-image>
</map>
<map class="map">
  <cover-image bindtap="_open" src="../../static/tabs/cart.png"></cover-image>
</map>

表单组件 ​

input 输入框 ​

jsx
<view class="form-input">
  <label>联系方式:</label>
  <input type="number" maxlength="11" model:value="{{tel}}" placeholder="请输入手机号" />
</view>
<view class="form-input">
  <label>联系方式:</label>
  <input type="number" maxlength="11" model:value="{{tel}}" placeholder="请输入手机号" />
</view>

radio/radio-group 单选项目及组 ​

jsx
<view class="form-input">
  <label>性别:</label>
  <radio-group bindchange="_inputSex">
    <view>
      <radio checked="{{true}}" value="1">
        男
      </radio>
    </view>
    <view>
      <radio color="#ff0000" value="0">
        女
      </radio>
    </view>
    <view>
      <radio disabled="{{true}}" value="-1">
        保密
      </radio>
    </view>
  </radio-group>
</view>
<view class="form-input">
  <label>性别:</label>
  <radio-group bindchange="_inputSex">
    <view>
      <radio checked="{{true}}" value="1">
        男
      </radio>
    </view>
    <view>
      <radio color="#ff0000" value="0">
        女
      </radio>
    </view>
    <view>
      <radio disabled="{{true}}" value="-1">
        保密
      </radio>
    </view>
  </radio-group>
</view>

checkbox/checkbox-group 多选项目及组 ​

jsx
<view class="form-input">
  <label>爱好:</label>
  <checkbox-group bindchange="_inputHobby">
    <view>
      <checkbox checked="{{true}}" value="抽烟">
        抽烟
      </checkbox>
    </view>
    <view>
      <checkbox value="喝酒">喝酒</checkbox>
    </view>
    <view>
      <checkbox disabled="{{true}}" value="烫头">
        烫头
      </checkbox>
    </view>
  </checkbox-group>
</view>
<view class="form-input">
  <label>爱好:</label>
  <checkbox-group bindchange="_inputHobby">
    <view>
      <checkbox checked="{{true}}" value="抽烟">
        抽烟
      </checkbox>
    </view>
    <view>
      <checkbox value="喝酒">喝酒</checkbox>
    </view>
    <view>
      <checkbox disabled="{{true}}" value="烫头">
        烫头
      </checkbox>
    </view>
  </checkbox-group>
</view>

switch 开关选择器 ​

jsx
<view>
  <switch bindchange="_inputAgree" type="checkbox">
    同意
  </switch>
</view>
<view>
  <switch bindchange="_inputAgree" type="checkbox">
    同意
  </switch>
</view>

button 按钮组件 ​

jsx
 <button  form-type="submit" type="primary" size="mini" plain="{{true}}">提交</button>
       <button form-type="reset" type="warn" size="mini">重置</button>
 <button  form-type="submit" type="primary" size="mini" plain="{{true}}">提交</button>
       <button form-type="reset" type="warn" size="mini">重置</button>

Copyright © 2024-present xiaocao