当前位置:网站首页>常用的视图容器类组件
常用的视图容器类组件
2022-07-05 20:19:00 【'wx】
1view
普通视图区域
类似于html中的div,是一个块级元素
常用来实现页面的布局效果
<view>
我是view
</view>
2.scroll-view
可滚动的视图区域
常用来实现滚动列表效果
<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
3.swiper和swiper-item
轮播图容器组件和轮播图item组件
<swiper class="swiper-container" indicator-dots="true" indicator-color="pink" indicator-active-color="orange" autoplay interval="1000" circular="true">
<swiper-item>
<view class="item">item1</view>
</swiper-item>
<swiper-item>
<view class="item">item2</view>
</swiper-item>
<swiper-item>
<view class="item">item3</view>
</swiper-item>
</swiper>
swiper组件常用属性
属性 | 类型 | 默认值 | 说明 |
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
autoplay | boolean | false | 是否自动切换 |
interval | number | 5000 | 自动切换时间间隔 |
circular | boolean | false | 是否采用衔接滑动 |
4.text 文本组件
类似于 HTML 中的 span 标签,是一个行内元素
通过 text 组件的 selectable 属性,实现长按选中文本内容的效果
5.rich-text 富文本组件
支持把 HTML 字符串渲染为 WXML 结构
通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构
6.button
按钮组件
功能比html中的button按钮丰富
通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)
7.image
图片组件
image组件默认宽度约300px,高度约200px
image的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性值如下
mode 值 | 说明 |
scaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说, 可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说, 图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
8.navigator
页面导航组件
类似于html中的a标签
边栏推荐
- [quick start of Digital IC Verification] 7. Basic knowledge of digital circuits necessary for verification positions (including common interview questions)
- 【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
- 关于BRAM IP复位的优先级
- [C language] merge sort
- ICTCLAS用的字Lucene4.9捆绑
- 鸿蒙系统控制LED的实现方法之经典
- Mysql频繁操作出现锁表问题
- Leetcode(695)——岛屿的最大面积
- 本季度干货导航 | 2022年Q2
- Is it safe for CICC fortune to open an account online?
猜你喜欢
leetcode刷题:二叉树15(找树左下角的值)
淺淺的談一下ThreadLocalInsecureRandom
Rainbond 5.7.1 支持对接多家公有云和集群异常报警
2022北京眼睛健康用品展,护眼产品展,中国眼博会11月举办
[quick start of Digital IC Verification] 1. Talk about Digital IC Verification, understand the contents of the column, and clarify the learning objectives
【数字IC验证快速入门】7、验证岗位中必备的数字电路基础知识(含常见面试题)
About the priority of Bram IP reset
走入并行的世界
Securerandom things | true and false random numbers
Practical demonstration: how can the production research team efficiently build the requirements workflow?
随机推荐
2023年深圳市绿色低碳产业扶持计划申报指南
Four methods of random number generation | random | math | threadlocalrandom | securityrandom
中金财富在网上开户安全吗?
怎么挑选好的外盘平台,安全正规的?
July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)
[quick start to digital IC Verification] 8. Typical circuits in digital ICs and their corresponding Verilog description methods
Introduction to dead letter queue (two consumers, one producer)
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
Enter the parallel world
leetcode刷题:二叉树11(平衡二叉树)
Schema和Model
【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
[quick start of Digital IC Verification] 6. Quick start of questasim (taking the design and verification of full adder as an example)
How to select the Block Editor? Impression notes verse, notation, flowus
强化学习-学习笔记4 | Actor-Critic
Codeforces Round #804 (Div. 2) - A, B, C
BZOJ 3747 POI2015 Kinoman 段树
DP: tree DP
Debezium series: PostgreSQL loads the correct last submission LSN from the offset
淺淺的談一下ThreadLocalInsecureRandom