83 lines
2.3 KiB
Markdown
83 lines
2.3 KiB
Markdown
# 基础组件串烧
|
||
|
||
|
||
|
||
**view**
|
||
|
||
相当于浏览器中的 div，这边主要说一下关于布局。
|
||
|
||
在微信小程序中，布局推荐使用的就是 flex 布局。
|
||
|
||
在 view 组件中，有一个 hover-class，可以设置手指按下去的时候的样式
|
||
|
||
|
||
|
||
**scroll-view**
|
||
|
||
这个是可以设置滚动的区域，可以设置横向滚动以及纵向滚动。
|
||
|
||
主要通过 scroll-x 以及 scroll-y 这两个属性来设置
|
||
|
||
```wxml
|
||
<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
|
||
|
||
|