IT技术之家

首页 > 小程序

小程序

【小程序基础】小程序内置组件_贤蛋大眼萌

发布时间:2022-10-24 16:46:47 小程序 0次 标签:小程序 前端 微信小程序
实现滚动效果必须添加scroll-x或者scroll-y属性(只需要添加即可,属性值相当于为true了)用于显示文本, 类似于span标签, 是行内元素。垂直方向滚动必须设置scroll-view一个高度。(块级元素,独占一行,通常用作容器组件)? scroll-view组件。用于显示图片,有如下常见属性。,块级元素,独占一行。? Button组件。...

🍳作者: 贤蛋大眼萌,一名很普通但不想普通的程序媛 \color{#FF0000}{贤蛋 大眼萌 ,一名很普通但不想普通的程序媛} 贤蛋大眼萌,一名很普通但不想普通的程序媛🤳

🙊语录: 多一些不为什么的坚持 \color{#0000FF}{多一些不为什么的坚持} 多一些不为什么的坚持

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

PS: 💭 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂 o f f e r ,程序员的必备刷题平台 ? ? 牛客网 \color{#ff7f50}{眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台--牛客网} 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台??牛客网

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

小程序内置组件

🎉 Text 文本组件🎁 Button按钮组件🎈 View视图组件解析💊 Image图片组件🚀 ScrollView滚动组件🏓 组件共同的属性

🎉 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>

🏓 组件共同的属性