『微信小程序从0到1』常用组件

您所在的位置：网站首页 › scroll-view组件 › 『微信小程序从0到1』常用组件

『微信小程序从0到1』常用组件

2022-12-15 04:29| 来源: 网络整理| 查看: 265

🐱‍🐉🐱‍🐉🐱‍🐉 请乘理想之马，挥鞭从此起程，路上春色正好，天上太阳正晴🐾🐾🐾

🌈博客主页👉白小筠

文章目录常见的视图容器类组件1、view2、scroll-view3、swiper和swiper-item view组件的基本使用实现纵向滚动效果实现轮播图 swiper组件的常用属性常用的基础组件内容1、text组件的*selectable*的属性，实现长按选中文本内容的效果2、rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构3、button组件4、image组件

常见的视图容器类组件 1、view 普通视图区域类似于HTML中的div，是一个块级元素常用来实现页面的布局效果 2、scroll-view 可滚动的视图区域常用来实现滚动列表效果 3、swiper和swiper-item 轮播图容器组件和轮播图item组件 view组件的基本使用

实现效果：在这里插入图片描述实现步骤： list.wxml

A B C

编辑样式在list.wxss

.container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: limegreen; } .container1 view:nth-child(2){ background-color: lightblue; } .container1 view:nth-child(3){ background-color: lightpink; } .container1{ /* 横向对齐 */ display: flex; justify-content: space-around; } 实现纵向滚动效果

效果展示：在这里插入图片描述实现步骤：

1、设置scroll-y="true“

A B C

2、设置高度需要设置高度，要不然页面不会显示滚动条

.container1{ border: 1px solid red; width: 100px; height: 120px; } 实现轮播图 A B C

样式

.swiper-container{ height: 150px; } .item{ height: 100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: lightblue; } swiper-item:nth-child(2) .item{ background-color: red; } swiper-item:nth-child(3) .item{ background-color: seashell; } swiper组件的常用属性

1、indicator-dots属性

让轮播图出现小点

效果展示：在这里插入图片描述

2、indicator-color指示点颜色

效果展示在这里插入图片描述

3、indicator-active-color被激活的小圆点的颜色

在这里插入图片描述

4、autoplay：自动切换默认5秒

5、interval 自定义切换时间

6、circulars是否采用衔接滑动

常用的基础组件内容 1、text组件的selectable的属性，实现长按选中文本内容的效果

需要使用真机调试查看效果

手机号支持长按选中效果 13800005056 2、rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

效果展示：在这里插入图片描述

3、button组件按钮组件功能比HTML的button按钮丰富通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

通过type指定按钮类型

普通按钮主色调按钮警告按钮

通过size属性指定按钮的大小

主色调按钮

在这里插入图片描述

通过plain设置镂空按钮

警告按钮

效果展示：在这里插入图片描述

4、image组件

图片组件

image{ border: 1px solid; }

在这里插入图片描述

image组件中通过model属性指定图片的裁剪和缩放模式，常用的model下属性如下

namefunctionscaleToFill宽高同时拉伸，填充满整个imageaspectFit以最长边为准进行缩放，显示出整个图片aspectFitll以最短边为准进行缩放，显示去掉长边不在比例内部分后的图片heightFix高度不变，宽度自动变化，保持原图宽高比不变widthFix宽度不变，高度自动变化，保持原图宽高比例

【本文地址】

『微信小程序从0到1』常用组件

『微信小程序从0到1』常用组件

今日新闻

推荐新闻