[移动开发]微信小程序学习笔记--组件

！！跟着b站up主“黑马程序员”学的！！

一、视图容器组件

1. view???????普通视图区域；实现也页面的布局效果
2. scroll-view? ? ? ?滚动视图；实现滚动列表效果
3. swiper 和 swiper-item? ? ? ? ? ? ? 轮播图容器组件；轮播图item组件

1.view：实现flex横向布局

.wxml文件中，添加内容：

<view class="containerl">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.wxss文件中进行布局排版

/*大小*/
.containerl view {
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
}
/*颜色*/
.containerl view:nth-child(1){
    background-color: lightgreen;
}
.containerl view:nth-child(2){
    background-color: lightpink;
}
.containerl view:nth-child(3){
    background-color: lightseagreen;
}
/*横向*/
.containerl{
    display: flex;
    justify-content: space-around;
}

2.scroll-view：实现纵向滚动效果

.wxml：

<scroll-view class="containerl"scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>scroll/view>

scroll-y表示纵向；scroll-x表示横向

.wxss：

? 去除横向设置，给scroll-view加边框、高度、宽度

.containerl{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

3.swiper和swiper-view：实现轮播图效果

.wxml：

<swiper class="swipper">
  <swiper-item>
     <view class="item">1</view>
  </swiper-item>
  <swiper-item>
    <view class="item">2</view>
  </swiper-item>
  <swiper-item>
    <view class="item">3</view>
  </swiper-item>
  <swiper-item>
    <view class="item">4</view>
  </swiper-item>
</swiper>

.wxss：

.swipper {
    height:150px;
}
.item{
    height:100%;
    line-height:150px;
    text-align:center;
}
swiper-item:nth-child(1){
    background-color: lightgreen;
}
swiper-item:nth-child(2){
    background-color: lightpink;
}
swiper-item:nth-child(3){
    background-color: lightseagreen;
}
swiper-item:nth-child(4){
    background-color: lightcyan;
}

swipper组件常用属性（写在.wxml文件swiper class后面）：

二、基础内容组件

1、text：文本组件

2、rich-text：富文本组件

1、text组件基本使用

只有text中文件可被选中，同时，需要增加“user-select”语句

原作者用“selectable”,我操作之后发现依旧不可选中，换成“user-select”就好了

<view>
  手机号支持长按选中效果
  <text user-select>13800005056</text>
</view>

2、rich-text组件基本使用

使用nodes属性节点

<view>
  <rich-text  class="cen" nodes="<h1 style='color:red'>标题</h1>"></rich-text>
</view>

因为想把结果居中，所以设了个class方便操作，结果：

?三、其他常用组件

1、button：按钮组件

2、image：图片组件

3、navigator(后学)：页面导航组件

1、button按钮基本使用

默认一个按钮占一行，用size="mini"使得按钮变小，用plain使得按钮变镂空

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!--小尺寸、镂空按钮-->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

2、image按钮基本使用

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

<image src="/1.jpg" mode="aspectFit"></image>