微信小程序:基础组件

31 阅读1分钟

基础组件

view

相当于浏览器中的 div,这边主要说一下关于布局。

在微信小程序中,布局推荐使用的就是 flex 布局。

在 view 组件中,有一个 hover-class,可以设置手指按下去的时候的样式

scroll-view

这个是可以设置滚动的区域,可以设置横向滚动以及纵向滚动。

主要通过 scroll-x 以及 scroll-y 这两个属性来设置

<scroll-view class="container2" scroll-x>
  <view class="scrollItem" style="background-color: lightsalmon;">1</view>
  <view class="scrollItem" style="background-color: lightseagreen;">2</view>
  <view class="scrollItem" style="background-color: lightblue;">3</view>
  <view class="scrollItem" style="background-color: pink;">4</view>
</scroll-view>

<view class="title">纵向滚动示例</view>
<scroll-view class="container3" scroll-y>
  <view class="scrollItem" style="background-color: lightsalmon;">1</view>
  <view class="scrollItem" style="background-color: lightseagreen;">2</view>
  <view class="scrollItem" style="background-color: lightblue;">3</view>
  <view class="scrollItem" style="background-color: pink;">4</view>
</scroll-view>

text

相当于是浏览器中的 span,可以横向的嵌套,设置某一段文字单独的样式

image

该组件用来设置图片。需要说明的是,因为小程序对程序的大小有要求。

在我们的项目中,一般我们自己写的代码不会太大,一般比较大的就是静态资源。

所以在小程序中,一般静态资源采用远程加载的方式。

button

按钮严格来讲,是属于表单组件,但是在平时开发中,哪怕没用到表单,按钮还是用得很多的。

详细的属性请参阅官方文档

navigator

该组件是一个导航组件。我们前面在进行路由跳转的时候,使用的是 API 的方式进行的跳转。

除了使用 API 的方式以外,还可以使用 navigator 组件进行跳转。

icon

微信小程序官方组件库提供了一些 icon,但是并不多,所以一般我们会用到第三方库或者 iconfont

富文本

在富文本输入框中,支持你填写 html 结构的字符串,回头在富文本输入框中会将这些 html 结构的字符串渲染为 wxml