微信小程序基础 -- 小程序UI组件（5）

爬虫囦

已于 2024-05-26 20:07:34 修改

阅读量3.2k

点赞数 33

分类专栏：微信小程序文章标签：小程序微信小程序

于 2024-05-26 20:06:59 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80809706/article/details/139219200

版权

小程序UI组件

1.小程序UI组件概述

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
什么是组件：

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

这里的组件通俗的讲就是标签

  <tagname property="value">
  Content goes here ...
  </tagname>

注意：所有组件与属性都是小写，以连字符 - 连接

1.1 属性值类型

在这里插入图片描述

1.2 公共属性

所有组件都有以下属性：
在这里插入图片描述

1.3 特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。

2. 视图容器

2.1 view 组件

view 也被称为视图容器。相当于 html 中的 div 标签。
开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

2.2 swiper 与swiper-item

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

在这里插入图片描述

案例：使用 swiper 滑块实现轮播图

1.配置app.json ，实现新建swiper页面

在这里插入图片描述
2.swiper.wxml 设计界面结构

<!--pages/swiper/swiper.wxml-->
<!-- 轮播图开始 -->
<view class="index_swiper">
	<swiper autoplay indicator-dots circular>
		<swiper-item wx:for="{
  {swiperList}}">
			<image mode="widthFix" src="{
  {item}}"></image>
		</swiper-item>
	</swiper>
</view>
<!-- 轮播图 结束 -->

3.swiper.wxss 设计样式

/* pages/swiper/swiper.wxss */
.index_swiper swiper {
	width: 750rpx;
	height: 340rpx;
}
.index_swiper swiper image {
	width: 100%;
}

4.swiper.js 文件中构建代码

// pages/swiper/swiper.js
Page({
	data: {
// 轮播图数组
		swiperList: ["/images/img/banner1.png", "/images/img/banner2.png",
			"/images/img/banner3.png"],
	},
})

5.效果如下图所示
在这里插入图片描述