附录1-小程序常用内置组件

目录

1  view

2  scroll-view

2.1  纵向

2.2  横向

3  swiper与swiper-item

4  text

5  rich-text

6  button

7  image

8  checkbox

8.1  数据驱动视图（单向绑定）

8.2  双向绑定

9  radio

10  movable-area与movable-view

---

1  view

相当于html的div

2  scroll-view

scroll-view是一个有滚动条的div

2.1  纵向

纵向相对简单，因为view本身自己独占一行

scroll-y是允许纵向滚动，scroll-x是允许横向滚动

2.2  横向

由于对scroll-view设置flex没有用，所以麻烦一点，html这样写

<scroll-view class="container1" scroll-x="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss这样写

.container1 view {
  display: inline-block;
  width:100px;
  height:100px;
  text-align: center;
  line-height:100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  border:1px solid red;
  height:100px;
  width:250px;
  white-space: nowrap;
}

这样就能达到这个效果了

• 进度条没了，不过我们一般也不用进度条

3  swiper与swiper-item

swiper是做轮播图用的

indicator-dots是轮播图下方的点，如果不写就没有点

swiper的常用属性还有下面这些，如果不加circular，那么切换到第三张的时候再往右拖是不会拖到第一张的，如果加上circular，切换到第三张的时候再往右拖可以拖到第一张

4  text

相当于html中的span

只写text你在手机上是不能选中的，我们可以加上selectable实现长按选中文本内容的效果

5  rich-text

rich-text可以通过nodes属性渲染html字符串

6  button

默认情况下按钮独占一行，使用size='mini'可以让按钮不独占一行

可以通过open-type属性调用微信的功能

7  image

项目文件都存储在本地，我们先在页面文件夹中放一张图片

之后将图片粘贴进去就好了

图像有默认的宽高，宽约300px，高约240px

mode属性用来指定图片的裁剪和缩放

8  checkbox

checkbox勾上之后再点击一下可以取消勾选

8.1  数据驱动视图（单向绑定）

8.2  双向绑定

9  radio

如果是单个radio，默认情况下你点击为选中状态后，再点击一次是取消不了的选中状态的，与html一样，radio常用于做必选的一组选择

简单做一个radio的双向绑定，在双向绑定后，radio在选中后再点击一下可以取消选中

10  movable-area与movable-view

我们搞一个最简单的结构，wxml这样写

然后简单搞一下样式

之后就会出现 红色的可移动区域 与 蓝色的可移动方块

你就可以在红色的区域将蓝色的方块拖来拖去了

如果你将direction的值改为horizontal，那么蓝色的方块只被允许横向移动。如果你将direction的值改为vertical，那么蓝色的方块只被允许纵向移动