小程序开发三——常用组件

1、view：

2、text：

长按文字复制。

<text selectable="true">
  哈哈哈哈
</text>

对文本内容解绑。

<text selectable decode>
  哈哈哈哈 &nbsp; 123
</text>

3、image：

默认宽度320px，高度240px
支持懒加载。

<image mode="bottom" lazy-load src=""></image>

4、swiper：

轮播图最外层是swiper
每一个轮播项 swiper-item
swiper存在默认样式 width:100% image存在默认宽高320 *240
swiper高度无法实现由内容撑开。

image.png image.png

<swiper>
  <swiper-item>
    <image mode="widthFix" src=""></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src=""></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src=""></image>
  </swiper-item>
</swiper>

5、navigator：

块级元素，默认自动换行，可以直接设置宽高。
url:要跳转的页面路径 绝对路径或者相对路径。不允许跳转到tabbar页面。

<navigator url="/pages/demo02/demo02">点我进去啊</navigator>

redirect：

关闭当前页面，跳转到某个页面；不允许跳转到tabbar页面。

<navigator open-type="redirect" url="/pages/demo02/demo02">点我进去啊redirect</navigator>

switchTab：

跳转到tabbar页面，关闭其他所有非tabbar页面；

<navigator open-type="switchTab" url="/pages/demo02/demo02">点我进去啊switchTabbar</navigator>

reLaunch:

关闭所有页面，可以随便跳转应用某个页面。

navigateBack: 返回页面。

exit: 退出小程序。

6、rich-text:富文本标签

nodes属性来实现
接收标签字符串
接收对象数组

7、button：

size控制按钮大小：
default默认大小
mini小尺寸
type控制按钮颜色：
default 灰色
primary 绿色
warn 红色
......

8、button的开放能力：

9、icon：

<icon type="success" size="20" color="green"></icon>

10、radio：

color修改颜色
是否选中要配合radio-group一起使用

<radio-group bindchange='handlechange'>
  <radio value='male'>男</radio>
  <radio value='female'>女</radio>
</radio-group>
<view>您选中的是：{{gender}}</view>

Page({
  data: {
    gender: ''
  },

  handlechange(e) {
    let gender = e.detail.value
    this.setData({
      gender
    })
  },

11、checkbox：

color修改颜色
是否选中要配合radio-group一起使用

Page({
  data: {
    list: [
      {
        id: 0,
        name: "苹果",
        value: "apple"
      },
      {
        id: 1,
        name: "梨子",
        value: "lizi"
      },
      {
        id: 2,
        name: "香蕉",
        value: "banner"
      }
    ]
  },
  bindchange(e) {
    console.log(e)
  }
})

<view>
  <checkbox-group bindchange="bindchange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
    {{item.name}}
    </checkbox>
  </checkbox-group>
</view>