• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序-常用组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

官方组件文档:https://developers.weixin.qq.com/miniprogram/dev/component/
微信小程序内置了很多组件,开发中可以直接使用他们来展示响应的内容

1.视图容器 view

类似于web中的div,不过他有一些内置的属性

  • hover-class:指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
<view hover-class="box">
    {{msg}}
</view>

当手指按下去时,这个容器会有box这个样式类的效果

  • 其他属性

2.text

类似于web中的span,他是个行内标签。拥有一些内置的属性

  • selectable:能否被选中。默认false
<view >
    <text selectable>{{msg}}</text>
</view>
<view >
    <text>{{title}}</text>
</view>

space:设置空格的大小,他有3个值:
ensp:空格大小=中文字符大小的一半
emsp:空格大小=中文字符的大小
nbsp:正常显示,就相当于<pre>标签,不会将多个空格当一个空格显示
<view >
    <text decode>空&nbsp;&nbsp;&nbsp;白</text>
</view>
<view >
    <text>空三个格白</text>
</view>
<view >
    <text space="ensp">空      白(中间6个空格)</text>
</view>
<view >
    <text space="emsp">空   白(中间3个空格)</text>
</view>
<view >
    <text space="nbsp">空   白(中间3个空格)</text>
</view>

3.image

图片。支持JPG、PNG、SVG格式
这个标签默认大小是320*240
属性:

  • src:图片路径
  • lazy-load:是否开启图片懒加载,在即将进入一定范围(上下三屏)时才开始加载,默认false
  • binderror:当错误发生时触发
  • bindload:当图片载入完毕时触发
  • mode:图片裁剪、缩放的模式
    mode的值:
    scaleToFill:默认。即改变图片宽高比来完全适应容器
    aspectFit:缩放模式,保持图片宽高比缩放图片,使长边大小与对应的容器的边相等,此时短边不能完全填充容器
    aspectFill:缩放模式,保持图片宽高比缩放图片,使短边大小与对应的容器的边相等,此时长边会超出容器
    widthFix:缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
    top:裁剪模式,不缩放图片,如果图片大小超出容器,则只显示图片的顶部区域
    bottom:同上,只显示底部区域
    center:同上,只显示中间区域
    left:同上,只显示图片的左边区域
    right :同上,只显示图片的右边区域
    top left:同上,只显示图片的左上边区域
    top right:同上,只显示图片的右上边区域
    bottom lef:同上,只显示图片的左下边区域
    bottom right:同上,只显示图片的右下边区域
4、cover-view

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 mapvideocanvascameralive-playerlive-pusher

只支持嵌套 cover-viewcover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

 

 

5、cover-image
覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
6、scroll-view
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序快速上手发布时间:2022-07-18
下一篇:
微信小程序开发——模板中加载html代码 - 逍遥云天发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap