当前位置:网站首页>Common view container class components
Common view container class components
2022-07-05 20:26:00 【'wx】
1view
Normal view area
Be similar to html Medium div, Is a block level element
Commonly used to achieve the layout effect of the page
<view>
I am a view
</view>
2.scroll-view
Scrollable view area
It is often used to achieve the effect of scrolling lists
<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
3.swiper and swiper-item
The carousel chart container component and the carousel map item Components
<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 Component common properties
attribute | type | The default value is | explain |
indicator-dots | boolean | false | Display panel indicator |
indicator-color | color | rgba(0, 0, 0, .3) | Indicate the color |
indicator-active-color | color | #000000 | The currently selected indicator color |
autoplay | boolean | false | Auto switch or not |
interval | number | 5000 | Auto switch interval |
circular | boolean | false | Whether to adopt the joint sliding |
4.text Text component
Be similar to HTML Medium span label , It's an in-line element
adopt text Component's selectable attribute , Long press the selected text content
5.rich-text Rich text component
Support HTML The string is rendered as WXML structure
adopt rich-text Component's nodes Attribute node , hold HTML The string is rendered as the corresponding UI structure
6.button
Button components
Functional ratio html Medium button Rich buttons
adopt open-type Attribute can call various functions provided by wechat ( Customer service , forward , Get user authorization , Access to user information, etc )
7.image
Picture components
image The default width of the component is about 300px, The height is about 200px
image Of mode Property is used to specify the cropping and scaling mode of the picture , frequently-used mode The property values are as follows
mode value | explain |
scaleToFill | ( The default value is ) Zoom mode , Do not keep aspect ratio zooming picture , Stretch the width and height of the picture completely to fill image Elements |
aspectFit | Zoom mode , Keep the aspect ratio scaled , Make the long edges of the picture fully visible . in other words , The picture can be displayed completely . |
aspectFill | Zoom mode , Keep the aspect ratio scaled , Only make sure that the short side of the picture is fully displayed . in other words , Pictures are usually complete only horizontally or vertically , Intercept will occur in the other direction . |
widthFix | Zoom mode , The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged |
heightFix | Zoom mode , The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged |
8.navigator
Page navigation component
Be similar to html Medium a label
边栏推荐
- c語言oj得pe,ACM入門之OJ~
- 微信小程序正则表达式提取链接
- E. Singhal and numbers (prime factor decomposition)
- ROS2专题【01】:win10上安装ROS2
- 小程序代码的构成
- 全国爱眼教育大会,2022第四届北京国际青少年眼健康产业展会
- MySql的root密码忘记该怎么找回
- A solution to PHP's inability to convert strings into JSON
- Leetcode skimming: binary tree 10 (number of nodes of a complete binary tree)
- When JS method passes long type ID value, precision loss will occur
猜你喜欢
Leetcode brush questions: binary tree 11 (balanced binary tree)
ROS2专题【01】:win10上安装ROS2
【数字IC验证快速入门】1、浅谈数字IC验证,了解专栏内容,明确学习目标
鸿蒙系统控制LED的实现方法之经典
【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
Hong Kong stocks will welcome the "best ten yuan store". Can famous creative products break through through the IPO?
[quick start to digital IC Verification] 8. Typical circuits in digital ICs and their corresponding Verilog description methods
Leetcode skimming: binary tree 16 (path sum)
Rainbond 5.7.1 支持对接多家公有云和集群异常报警
. Net distributed transaction and landing solution
随机推荐
14、Transformer--VIT TNT BETR
CCPC 2021威海 - G. Shinyruo and KFC(组合数,小技巧)
1:引文;
Unity editor extended UI control
Leetcode brush questions: binary tree 18 (largest binary tree)
小程序项目结构
实操演示:产研团队如何高效构建需求工作流?
Process file and directory names
- Oui. Net Distributed Transaction and Landing Solution
解决php无法将string转换为json的办法
信息学奥赛一本通 1340:【例3-5】扩展二叉树
Relationship between mongodb documents
19 Mongoose模块化
Minimum commission for stock trading account opening, where to open an account with low commission? Is it safe to open an account on your mobile phone
Document method
mongodb文档间关系
2020 CCPC 威海 - A. Golden Spirit(思维),D. ABC Conjecture(大数分解 / 思维)
零道云新UI设计中
基金网上开户安全吗?去哪里开,可以拿到低佣金?
银河证券在网上开户安全吗?