微信小程序view与scroll-view组件的使用介绍
更新时间：2022年10月09日 10:34:58 作者：honker707
小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，这篇文章主要介绍了微信小程序view与scroll-view组件的使用
小程序组件的分类
小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，官方把小程序里的组件分为了9大类，分别是
①视图容器
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas画布组件
⑧开放能力
⑨无障碍访问
常见的视图容器类组件
①view
普通视图区域
类似于HTML中的div，是一个块级元素
常用于实现页面的布局效果
②scroll-view
可滚动的视图区域
常用于实现滚动列表效果
③swiper和swiper-item
轮播图容器组件和轮播图item组件
view组件的基本使用
在hacker页面实现如图所示的flex横向布局效果：
hacker.wxml
<!--pages/hacker/hacker.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
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
<!--pages/hacker/hacker.wxml-->
<!--scroll-y属性：允许纵向滚动-->
<!--scroll-x属性：允许横向滚动-->
<!--注意：使用竖向滚动时必须给scroll-view一个固定高度-->
<scroll-view class="container1"scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了js实现点击生成随机div，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
javascript中的有名函数和无名函数...2007-10-10
这篇文章主要为大家详细介绍了Three.js快速入门教程，帮助大家快速入门，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
微信小程序web-view无法打开该页面不支持打开的解决方法
小程序现在日渐成熟,功能也越来越强大,我们今天来一起看看小程序跳转的问题,下面这篇文章主要给大家介绍了关于微信小程序web-view无法打开该页面不支持打开的解决方法,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了JS实现多选框的操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了JavaScript常用数学函数用法,结合实例形式分析了JavaScript常见的对数、平方、绝对值、正弦、四舍五入等相关数学函数使用技巧,需要的朋友可以参考下2018-05-05
作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。2021-05-05
这篇文章主要为大家详细介绍了js实现多个标题吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了超酷的照片墙展示效果图附源码下载的相关资料,需要的朋友可以参考下2015-10-10
最新评论