小程序开发：微信小程序里面的组件标签

标签必须得有闭合

1，view标签相当于html里面的div标签；
点击进入view标签的属性

2，text标签相当于是html里面的span标签；
点击进入text标签的属性

3，image标签两种写法：
其中图片是可以访问外部链接的，例如：src=“http://www.baidu.com”

<image src="xxx" mode="widthFix"></image> // widthFix 属性自适应高度不变
<image src="xxx"/>

点击进入image标签属性

4，navigator标签相当于html里面的超链接 a 标签；(内部跳转链接，不能跳转tabber页面)
默认的类型为：navigate
但navigator的url只能跳转小程序内的，不能跳转外部的链接和tabber，可以理解为路由；

<navigator class="xxxx" url="/pages/logs/logs"></navigator> <!--url不需要写文件名后缀-->

跳转的类型有：

所以要想跳转tabber必须得切换类型来：open-type

<navigator class="xxxx" url="/pages/logs/logs" open-type="reLaunch"></navigator> 

点击进入navigator标签属性

5，scroll-view标签可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height
点击进入scroll-view标签

开启横向滑动：

  <scroll-view scroll-x>
    <view class="l_big">
      <view class="l-mal">1</view>
      <view class="l-mal">2</view>
      <view class="l-mal">3</view>
      <view class="l-mal">4</view>
    </view>
  </scroll-view>

.l_big {
  display: flex;
}
.l-mal {
  height: 120px;
  width: 120px;
  background: red;
  margin-right: 1px;
  flex: 1 0 120px;  /*三个属性分别为：扩展 缩放 自身大小*/
  /* flex: 0 1 120px;  /*第二个参数为1 即超出了缩放*/
  /* flex: 1 0 120px;  /*第一个参数为1 即占不满情况下进行占满*/
}

/* 隐藏横向滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

6，swiper标签滑块视图容器
点击进入swiper标签

开启横向滑动：

<swiper class="pic_big" indicator-dots autoplay interval="2000" circular>
  <swiper-item class="pic_inner">
    <image src="http://file.zhibo.tv/uploads/imgs/2021/01-04/4f729904f709e80679bcd81b8686fa67_1000x390.jpg" mode="widthFix">
    </image>
  </swiper-item>
  <swiper-item class="pic_inner">
    <image src="http://file.zhibo.tv/uploads/imgs/2021/01-03/2d145e2af4f71369d1b01402d7ca9ae4_1417x553.jpg" mode="widthFix">
    </image>
  </swiper-item>
  <swiper-item class="pic_inner">
    <image src="http://file.zhibo.tv/uploads/imgs/2021/01-04/4f729904f709e80679bcd81b8686fa67_1000x390.jpg" mode="widthFix">
    </image>
  </swiper-item>
</swiper>

7，表单控件标签： button input checkbox switch…
点击进入表单控件标签

8，进度条标签： progress
点击进入进度条标签

<view style="padding:20rpx">
  <progress percent="60" show-info></progress>
</view>