2.微信小程序-官方组件

view（视图容器）

类似于 HTML 中的 div，是一个块级元素

以data-开头的自定义属性通过e.target.dataset.获取

    <view class='grid_item' bindtap="bindViewTap" data-id="{{language[index]}}" >
    <image src="../../photo/banner.jpg"></image>
    <text>{{item}}</text>
    </view> 

 scroll-view（可滚动视图容器）

常用来实现滚动列表效果

scroll-x 可以横向滑动

scroll-y 可以纵向滑动

<scroll-view scroll-x >
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>

 swiper（轮播图）- 使用

<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" indicator-dots circular  autoplay>


    <block wx:for="{undefined{3}}" wx:key="{undefined{index}}">

        <swiper-item class="item">

            <image class="itemImg {undefined{currentIndex == index ? 'active': ''}}"
                   src="/../img/banner.jpg"></image>

        </swiper-item>

    </block>

</swiper>

 swiper轮播图属性
 indicator-dots 显示面板小圆点
 indicator-color 小圆点颜色
 indicator-active-color='#FFF'  选中的颜色
 previous-margin="50rpx"  距离前边缘
 next-margin="50rpx"     距离后边缘
 autoplay 是否自动切换
 circular 是否采用衔接滑动 （循环滑动）
 bindchange 绑定事件
 duration 播放时间

 text（文本组件 ）

类似于 HTML 中的 span 标签，是一个行内元素

<text>{{item}}</text>

 rich-text（富文本组件）

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构

 <rich-text nodes="<h1 style='color: red;'></h1>">

 button（按钮组件）

属性：type :primary/warn

size:mini

plain 镂空

通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

点击事件用bindtap

以data-开头的自定义属性通过e.target.dataset.获取

 <button type="primary" bindtap="bindViewTap2"  data-id2="666">点击</button>


//自定义属性获取
 bindViewTap2(e){
    console.log(e.target.dataset.id2);

  } 

 image（图片组件）

image 组件默认宽度约 300px、高度约 240px

<image src="../../photo/banner.jpg" mode="widthFix"></image>

mode 属性用来指定图片的裁剪和缩放模式

scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

checkbox（多选框）

监听多选框的选择事件用bindchange

<!--index.wxml-->

<checkbox bindchange="bindViewTap2">你好啊  </checkbox>

input（输入框）

监听input的输入值用bindinput

<input type="text" bindinput="bind"/>

navigator（页面导航组件）

类似于 HTML 中的 a 链接

<navigator url="/pages/home/home"></navigator>

block （）

block不是一个组件，它是一个包裹性质的容易，，不会在页面中做任何渲染，一次性控制几个VIEW，避免出现不必要的节点

两者的区别是，<view> 是一个组件，会在页面上做渲染；<block>不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个<block>使用的例子：

wx:if

<block wx:if="{{true}}">
    <view> text </view>
    <view> text </view>
</block>


wx:for

<block wx:for="{{[1, 2, 3]}}">
    <view> {{index}}: </view>
    <view> {{item}} </view>
</block>


wx:elif 和 wx:else

<block wx:if="{{boolean==true}}">
    <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
    <view class="bg_red"></view>
</block>
<block wx:else>
    <view class="bg_red"></view>
</block>