您现在的位置是：网站首页> 编程资料编程资料

微信小程序view与scroll-view组件的使用介绍_javascript技巧_

2023-05-24 340人已围观

简介 微信小程序view与scroll-view组件的使用介绍_javascript技巧_

小程序组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，官方把小程序里的组件分为了9大类，分别是

①视图容器

②基础内容

③表单组件

④导航组件

⑤媒体组件

⑥map地图组件

⑦canvas画布组件

⑧开放能力

⑨无障碍访问

常见的视图容器类组件

①view

普通视图区域

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

常用于实现页面的布局效果

②scroll-view

可滚动的视图区域

常用于实现滚动列表效果

③swiper和swiper-item

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

view组件的基本使用

在hacker页面实现如图所示的flex横向布局效果：

hacker.wxml

ABC

hacker.wxss

/* pages/hacker/hacker.wxss */ .container1 view{ 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: lightpink; } .container1{ display: flex; justify-content: space-around; }

scroll-view组件的基本使用

在hacker页面实现如图所示的纵向滚动效果：

hacker.wxml

ABC

hacker.wxss

/* pages/hacker/hacker.wxss */ .container1 view{ 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: lightpink; } .container1{ width: 100px; /* 给 scroll-view 固定高度 */ height: 100px; }

到此这篇关于微信小程序view与scroll-view组件的使用介绍的文章就介绍到这了,更多相关小程序view与scroll-view组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：在react中使用windicss的问题_React_

下一篇：React Native系列之Recyclerlistview使用详解_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网