小程序view基本组件使用_view组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51330376/article/details/127035716

1. 小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组

件分为了 9 大类，分别是：

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问

2. 常用的视图容器类组件

① view

⚫ 普通视图区域

⚫ 类似于 HTML 中的 div，是一个块级元素

⚫ 常用来实现页面的布局效果

② scroll-view

⚫ 可滚动的视图区域

⚫ 常用来实现滚动列表效果

③ swiper 和 swiper-item

⚫ 轮播图容器组件和轮播图 item 组件

view之横向排列

今天讲的是view组件

目录结构

效果展示

源代码

编写list.wxml文件

<!--pages/list/list.wxml-->
<text>股好看pages/list/list.wxml</text>
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

编写list.wxss文件

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightcoral;
}
.container1 view:nth-child(3){
  background-color:lightgoldenrodyellow
}
.container1{
  display: flex;
  justify-content: space-around;
}

横向排列核心代码

.container1{

display: flex;

justify-content: space-around;

}

scroll-view组件使用：上下滚动

编写list.wxml文件

<!--pages/list/list.wxml-->
<text>股好看pages/list/list.wxml</text>
<scroll-view class="container1"scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

编写list.wxss文件

/* pages/list/list.wxss */

.container1 view{

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

}

.container1 view:nth-child(1){

  background-color: lightblue;

}

.container1 view:nth-child(2){

  background-color: lightcoral;

}

.container1 view:nth-child(3){

  background-color:lightgoldenrodyellow

}

.container1{

  border: 1px solid red;

 height: 100px;

 width: 100px;

}

3.轮播图swiper

效果

编写list.wxml文件

<swiper class="kk">
<!-- 第一个轮播图 -->
<swiper-item>
<view class="id">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="id">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="id">C</view>
</swiper-item>
</swiper>

编写list.wxss文件

/* pages/list/list.wxss */
.kk{
  height: 150px;
}
.id{
  /* 设置高度 */
  height: 100%;
  /*  */
  line-height: 150px;
  /* s设置文本的位置 */
  text-align: center;
}
/* 每个轮播图设置背景颜色 
swiper-item:nth-child(1)后面要加上空格再+.id财会有颜色变化
*/
swiper-item:nth-child(1) .id{
  background-color: aquamarine;
}
swiper-item:nth-child(2) .id{
  background-color: rgb(255, 0, 55)
}
swiper-item:nth-child(3) .id{
  background-color: aqua;
}
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightcoral;
}
.container1 view:nth-child(3){
  background-color:lightgoldenrodyellow
}
.container1{
  border: 1px solid red;
 height: 100px;
 width: 100px;
}