微信小程序学习——7.8【常见组件】

常见组件

重点讲解⼩程序中常⽤的布局组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等

7.1 view

代替 原来的 div 标签

 <view hover-class="h-class">
  点击我试试
  </view>

7.2 text

1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码
   

代码:

<text selectable="{{false}}" decode="{{false}}">
	普&nbsp;通&lt;
</text>

7.3 image

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载
   
   mode 有效值：
   mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
   

7.4 Swiper轮播图

swiper标签：滑块视图容器
swiper-item标签：滑块，默认宽度和⾼度都是100%

示例代码：

<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="##ff0094">
  <swiper-item>
    <image src="//gw.alicdn.com/imgextra/i3/121/O1CN01d4N6Pw1ClSXpSiESc_!!121-0-lubanu.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="//gw.alicdn.com/imgextra/i1/198/O1CN01snMZj51DKj2eIkiDC_!!198-0-lubanu.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="https://img.alicdn.com/tps/i4/https://img.alicdn.com/tps/i4//TB1cZkvTeH2gK0jSZJnSuuT1FXa.jpg"/>
  </swiper-item>
</swiper>

swiper {
  width: 100%;
  height: calc(100vw*352/1125);
  /* height: 31.28vw; */
}
image {
  width: 100%;
}

7.5 navigator导航栏

• 导航组件，类似超链接标签
• 块级元素，默认会换行，可直接加宽度和高度
  

open-type属性有效值：

代码示例：

<text>pages/search/search.wxml</text>
<navigator url="/pages/logs/logs">日志页面</navigator>
<navigator url="/pages/index/index">跳转tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">日志页面 redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab 跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/img/img">reLaunch 可以随便跳</navigator>

7.6 rich-text

富文本标签：可以将字符串解析成对应标签，类似 vue中 v-html 功能
代码示例：

<!-- 显示斜体hello world -->
<rich-text nodes="<i> hello world </i>"></rich-text>

nodes属性
nodes 属性⽀持 字符串 和 标签节点数组

7.7 button

7.8 icon

<!-- search.wxml -->
<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
 
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
 
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

// pages/search/search.js
Page({
  data: {
   iconSize: [20, 30, 40, 50, 60, 70],
   iconType: [
     'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 
'download', 'search', 'clear'
   ],
   iconColor: [
     'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
  }
})

7.9 radio

• 可以通过 color属性来修改颜色
• 需要搭配 radio-group ⼀起使用

<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio color="red" value="female">女</radio>
</radio-group>
<view>单选框选中的是{{gender}}</view>

Page({
  data() {
    gender: ''
  },
  handleChange(e) {
    console.log(e);
    let gender = e.detail.value
    this.setData({
      // gender:gender
      gender
    })
  }
})

7.10 checkbox

• 可以通过 color属性来修改颜色
• 需要搭配 checkbox-group ⼀起使用

<checkbox-group bindchange="handleItemChange">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>选中的水果有{{checkedList}}</view>

Page({
  data: {
    list:[
      {id:0,name:"苹果",value:"apple"},
      {id:1,name:"葡萄",value:"grape"},
      {id:2,name:"香蕉",value:"banana"},
    ],
    checkedList: ''
  },
  handleItemChange(e) {
    console.log(e);
    const checkedList = e.detail.value
    this.setData({
      checkedList
    })
  }
})

八、自定义组件

类似vue或者react中的自定义组件