天津网站seo策划,门户网站开发投标文件.doc,合肥卫来,创建一个软件需要多少钱本帖开始介绍小程序中的一些基本组件~
微信小程序是一种轻量、快速、跨平台的应用程序#xff0c;是微信公众号的重要组成部分。随着微信小程序的普及#xff0c;越来越多的开发者和企业开始使用微信小程序来搭建自己的应用#xff0c;但是对于初次接触微信小程序的开发者…本帖开始介绍小程序中的一些基本组件~
微信小程序是一种轻量、快速、跨平台的应用程序是微信公众号的重要组成部分。随着微信小程序的普及越来越多的开发者和企业开始使用微信小程序来搭建自己的应用但是对于初次接触微信小程序的开发者来说可能不太清楚微信小程序支持哪些基础组件。本文将为大家介绍微信小程序支持的基本组件希望对大家有所帮助。
1. 视图容器View
微信小程序中视图容器是最基本的组件之一用于展示界面元素。视图容器可以嵌套其他组件包括文本、图片、按钮等。视图容器也可以设置不同的样式包括背景颜色、边框、圆角等。通过使用视图容器组件我们可以实现各种简单和复杂的界面布局。
2. 文本Text
文本组件是我们常用的界面元素之一用于展示文字信息。文本组件支持显示单行或多行文本同时也支持设置字体颜色、大小、对齐方式等样式属性。在微信小程序中文本组件可以和视图容器组件嵌套使用从而实现更加丰富的布局效果。
3. 轮播swiper
轮播组件用于实现轮播效果比如展示多张图片。微信小程序中轮播组件支持设置轮播间隔、是否自动轮播以及展示图片的方式横向/纵向。通过使用轮播组件我们可以实现各种展示效果比如广告轮播、图片展示等。
4 页面滚动scroll-view
scroll-view组件用于在微信小程序页面中可以实现滚动效果展示大量的内容。通过设置scroll-view组件的宽度、高度等样式属性以及使用scroll-view组件的滚动和触摸事件可以实现复杂的滚动效果。 一.宿主环境
一些理论性的东西分享几个重点的PPT截图~ 二.视图容器类组件 横屏滚动的图片就时swiper子目录之下的item组件。
1.View组件的基本使用
又称视图组件最核心的组件一些理论讲解如下所示 如上的效果实现的原理有以下几个步骤 1.首先在最外层嵌套一个view再在内部嵌套数个view即可保证出现在同一行 2.其他的样式主要再Wxss中实现语法和Css基本一致 wxml文件
view classcontainer1viewJSL/viewviewZSF/viewviewLP/view
/view
wxss文件
.container1 view
{width: 200rpx;height: 200rpx;text-align: center;line-height: 200rpx;color: antiquewhite;
}
.container1 view:nth-child(1)
{/* 吃一堑 长一智view后面不能有空格 */background-color: blue;margin-right: 30rpx;
}
.container1 view:nth-child(2)
{background-color:red;margin-right: 30rpx;
}
.container1 view:nth-child(3)
{background-color:orange;
}
.container1
{display: flex;/* 横向布局 */margin: 20rpx;justify-content: space-around;
} 不过还是有一些区别的如下
.container1 view:nth-child(1)
该选择器作用的元素是.container1内部的第1个子元素~
2.scroll-view组件
本质上就是滚动图 scroll -y 纵向滚动scroll -x 横向滚动 wxml文件
scroll-view classcontainer2 scroll-yviewfirst/viewviewsecond/viewviewthird/view
/scroll-view wxss文件
.container2
{width: 700rpx;margin: 30rpx;height: 200rpx;/* 如果不加高度则无法实现纵向滚动 */
}.container2 view
{width: 700rpx;height: 200rpx;font-size:x-large;color:darkblue;text-align: center;line-height: 200rpx;background-color:aquamarine;border: bisque;
}
上述用到了一次后代选择器别忘了Css的基础呀~
3.swiper-view和swiper组件
顾名思义本质上就是轮播图swiper是轮播图的框体而swiper-view是内部的元素项~ wxml文件
swiper classswiper1 indicator-dots indicator-colorwhite indicator-active-colorblue autoplay interval2000 circular!-- 这部分是实现轮播图下面的小圆点可以根据两个不同的属性来分别更改样式 --
swiper-itemview classitem1A/view
/swiper-item
swiper-itemview classitem1B/view
/swiper-item
swiper-itemview classitem1C/view
/swiper-item
/swiper wxss文件
.swiper
{height: 200rpx;
}
.item1
{font-size: xx-large;height: 200rpx;text-align: center;line-height: 200rpx;
}swiper-item:nth-child(1)
{background-color: lightblue;
}
swiper-item:nth-child(2)
{background-color:lightcoral
}
swiper-item:nth-child(3)
{background-color:lightseagreen
}
博主做出的效果如下
