117.【微信小程序 - 01】（三）

<!--pages/list/list.wxml-->
<!-- 
  设置三个轮播图 indicator-dots->展示圆点的 autoplay interval="3000"->自动播放 circular-》循环
 -->
<swiper class="container1" indicator-dots autoplay interval="3000" circular>
  <swiper-item>A</swiper-item>
  <swiper-item>B</swiper-item>
  <swiper-item>C</swiper-item>
</swiper>

/* 对container1这个类选择器下的 swiper-item标签的第N个子标签进行渲染 */
.container1 swiper-item:nth-child(1) {
  background-color: aquamarine;
  height: 100%;
  line-height: 150PX;
  text-align: center;
}
.container1 swiper-item:nth-child(2) {
  background-color: rgb(29, 233, 56);
  height: 150px;
  line-height: 150PX;
  text-align: center;
}
.container1 swiper-item:nth-child(3) {
  background-color: rgb(194, 224, 19);
  height: 150px;
  line-height: 150PX;
  text-align: center;
}
/* 对整个container1做渲染 */
.container1 {
  height: 150px;
}

一定要加上 selectable 或 user-select这个属性、否则不会支持。
<!--pages/list/list.wxml-->
<view>
  手机号支持长按选中效果 user-select->新版 selectable->已经废弃
  <text user-select>18844129422</text>
</view>

<view>
  手机号支持长按选中效果 user-select->新版 selectable->已经废弃
  <text user-select>18844129422</text>
</view>
<rich-text nodes="<h1 style='color:red'>您好</h1>"/>

<!--pages/list/list.wxml-->
<!-- 主题按钮 type -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>
  -----------------------------------------------------
</view>
<!-- size="mini" 小型按钮 -->
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>
  -----------------------------------------------------
</view>
<!-- plain 镂空按钮-->
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

<!--pages/list/list.wxml-->
<!--  aspectFill-> 完整显示图片但边框可能会留白。aspectFill填充整个区域但图片可能会发生裁剪。
      widthFix-> 图片会完整的显示出来，但图片的高度会被修改。 heightFix 长度不变，宽度自适应。
-->
<image src="" />
<image src="/images/1.jpg" mode="heightFix"></image>

/* 对container1这个类选择器下的 swiper-item标签的第N个子标签进行渲染 */
image{
  /* width: 100%; */
  border: 1px solid rebeccapurple;
}