【小程序基础】小程序内置组件

🍳作者：$贤蛋大眼萌，一名很普通但不想普通的程序媛$🤳

🙊语录：$多一些不为什么的坚持$

📝本文章收录于专栏：小程序从0到放飞自我

PS: 💭$眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台--牛客网$

求知无坦途，学问无捷径。👣$一步一个脚印，你走过的路，每一步都算数。$ 每一次进步都是对自己努力的肯定。如果读了文章有收获，不如一起来学习，一起进步吧。传送门🚪刷题神器

🎉 Text 文本组件

​ Text组件 text 用于显示文本, 类似于span标签, 是行内元素。

代码示例：

<!-- text组件 -->
<view>------------------ text组件 ------------------</view>
<text>Hello World</text>
<text user-select>{{ message }}</text>
<text user-select="{{true}}">{{ message }}</text>
<text decode>&gt;</text>

🎁 Button按钮组件

​ Button组件 button 用于创建按钮，默认块级元素 ，块级元素，独占一行。

代码示例：

<view>------------------ button组件 ------------------</view>
<!-- 1.基本使用 -->
<button>按钮</button>

<button size="mini">size属性</button>

<button size="mini" type="primary">type属性</button>
<button size="mini" type="warn">type属性</button>
<button size="mini" class="btn">自定义属性</button>

<button size="mini" plain>plain属性</button>
<button size="mini" disabled>disabled属性</button>
<button size="mini" loading class="btn">loading属性</button>
<button size="mini" hover-class="active">hover效果</button>

🎈 View视图组件解析

​ 视图组件 view（块级元素，独占一行，通常用作容器组件）

代码示例：

<view>------------------ View组件 ------------------</view>
<view hover-class="active">我是view组件</view>
<view>哈哈哈</view>

💊 Image图片组件

​ Image组件 image 用于显示图片，有如下常见属性。

代码示例：

<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
 <image src="/assets/zznh.png"/>
<image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/>

<!-- 2.图片重要的属性: mode -->
<image src="/assets/zznh.png" mode="aspectFit"/>
<!-- image基本都是设置widthFix -->
 <image src="/assets/zznh.png" mode="widthFix"/>
<image src="/assets/zznh.png" mode="heightFix"/>
<!--3. 选择本地图片: 将本地图片使用image展示出来 -->
<button bindtap="onChooseImage">选择图片</button>
<image class="img" src="{{chooseImageUrl}}" mode="widthFix"/>

 onChooseImage() {
    wx.chooseMedia({
      mediaType: "image"
    }).then(res => {
      const imagePath = res.tempFiles[0].tempFilePath
      this.setData({ chooseImageUrl: imagePath })
    })
  }

🚀 ScrollView滚动组件

​ scroll-view组件 scroll-view可以实现局部滚动。

PS:

实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了)

垂直方向滚动必须设置scroll-view一个高度

代码示例：

<view>------------------ scroll-view组件 ------------------</view>
<!-- 上下滚动(y轴) -->
<scroll-view class="container scroll-y" scroll-y>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view> 
<!-- 左右滚动(x轴) -->
<scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view>

🏓 组件共同的属性