十二.内置组件-视图容器类组件

1. view组件 类似 div

2. scroll-view 组件 滚动效果 带有滚动条可以用这个

   • 我们确实可以用view来实现和scroll-view一样的效果，但是还是推荐用scroll-view，因为小程序为scroll-view提供滚动相关各种事件和属性

3. swiper 和 swiper-item 组件

   view -> div scroll-view swiper,swiper-item 轮播图

4. text -> span 行内标签 一行可以显示多个

属性绑定 <image src="{{变量}}">

<text>1</text>
<text user-select="{{true}}">hello world</text>
<text user-select>hello world</text>
<!-- rich-text 相当于vue中v-html  -->
<!-- 当我们后台数据拿回来是html字符串的时候，就可以用这个要渲染，相当于v-html  -->
<rich-text nodes="<h1 style='color:red;'>hello</h1>"/>

试一试
<!-- 要等比例缩放，并且保证长的边能全部显示出来 -->
<image src="/imgs/3.jpg" mode="aspectFit" />
<!-- 要等比例缩放，并且保证短的边能全部显示出来 -->
<image src="/imgs/3.jpg" mode="aspectFill" />

    <!-- 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 类似mode="aspectFill" -->
    <div style="background-size: cover;">
​
    </div>
    <!-- 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。类似小程序中 mode="aspectFit" -->
    <div style="background-size: contain;">

view -> div text -> span 有一个属性可以让用户选文字 user-select rich-text 当我们要渲染的是html的时候用这个 nodes属性 swiper,swiper-item 轮播图 设置无限循环 小圆点 button size="mini" type="warn,primary,default" disabled plain 镂空效果image mode="aspectFit" mode="aspectFill"

<view class="a">
  123
</view>
​
<view class="b">
  3333
</view>
​
<swiper class="swiper-box" circular indicator-dots>
  <swiper-item>
    1
  </swiper-item>
  <swiper-item>
    2
  </swiper-item>
</swiper>
​
<!-- view->div text->span  -->
<text>1</text>
<text user-select="{{true}}">hello world</text>
<text user-select>hello world</text>
<!-- rich-text 相当于vue中v-html  -->
<!-- 当我们后台数据拿回来是html字符串的时候，就可以用这个要渲染，相当于v-html  -->
<rich-text nodes="<h1 style='color:red;'>hello</h1>"/>
​
​
<button>按钮</button>
<button size="mini">按钮</button>
<button type="default">按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>
​
<button type="primary" plain>按钮</button>
​
<button type="primary" disabled>按钮</button>
<button type="primary" disabled="{{true}}">按钮</button>
​
<!-- 要保证图片适应容器，宽和高直接拉伸，所以这种一般会变形 -->
<image src="/imgs/3.jpg" />
<image src="/imgs/3.jpg" mode="scaleToFill" />
<!-- 要等比例缩放，并且保证长的边能全部显示出来 -->
<image src="/imgs/3.jpg" mode="aspectFit" />
<!-- 要等比例缩放，并且保证短的边能全部显示出来 -->
<image src="/imgs/3.jpg" mode="aspectFill" />
​
​

小程序的属性动态绑定和插值表达式写法一样的

阻止冒泡 catchtap