【微信小程序】常用组件及基本使用详解

原创

已于 2022-07-18 18:59:29 修改 · 1.4w 阅读

141

276 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-07-18 14:03:16 首次发布

本文详细介绍了微信小程序中常用的组件，包括view、scroll-view、swiper和swiper-item的基础使用，展示了如何实现布局、滚动效果和轮播图。此外，还讲解了text组件的user-select属性，rich-text组件的nodes属性，以及button和image组件的多种用法。通过实例代码和效果展示，帮助读者快速掌握这些组件的使用技巧。

在这里插入图片描述

🖐本节学习目标：
✅学会使用常用的组件

1.常用的容器类组件的使用

1.view组件的基本使用

🌏view类似于HTML中的div，实现了普通的视图区域。

🍁例如：使用flex实现横向布局。

wxml代码:

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

wxss代码：

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

.container1 view:nth-child(1){
   
   
  background-color: aquamarine;
}
.container1 view:nth-child(2){
   
   
  background-color: azure;
}
.container1 view:nth-child(3){
   
   
  background-color: darkorange;
}

.container1 {
   
   
  display: flex;
  justify-content: space-around;
}