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

你的名字 2023-01-02 01:18 276阅读 0赞

标签必须得有闭合

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

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

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

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

[点击进入image标签属性][image]

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

跳转的类型有：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]  
所以要想跳转tabber必须得切换类型来：open-type

[点击进入navigator标签属性][navigator]

**5，scroll-view标签**可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height  
[点击进入scroll-view标签][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]

开启横向滑动：

**7，表单控件标签：** button input checkbox switch…  
[点击进入表单控件标签][Link 1]

**8，进度条标签：** progress  
[点击进入进度条标签][Link 2]

[view]: https://developers.weixin.qq.com/miniprogram/dev/component/view.html
[text]: https://developers.weixin.qq.com/miniprogram/dev/component/text.html
[image]: https://developers.weixin.qq.com/miniprogram/dev/component/image.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221120/4318337a01324f8ba5d835090453d37d.png
[navigator]: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
[scroll-view]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[swiper]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/form.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/progress.html