微信小程序1，常用组件 view、swiper、swiper |
您所在的位置：网站首页 › 微信错误代码-1009 › 微信小程序1，常用组件 view、swiper、swiper |
|
常用组件
view
类似于html中的div，是块级元素。 属性说明hover-class为string类型，默认为none，指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果hover-stop-propagation为boolean类型，默认为false，指定是否阻止本节点的祖先节点出现点击态hover-start-time为number类型，默认为50，按住后多久出现点击态，单位毫秒hover-start-time为number类型，默认为400，手指松开后点击态保留时间，单位毫秒 swiper滑块视图容器，即轮播图最外面的容器。其中只可放置swiper-item组件，否则会导致未定义的行为，下方为常用属性，其他很多属性可以去官网看。 属性说明indicator-dots为boolean类型，默认为false,是否显示面板指示点indicator-color指示点的颜色indicator-active-color当前选中指示点的颜色autoplay为boolean类型，默认为false，是否自动切换current为number类型，默认为0，当前滑块的indexinterval为number类型，默认为5000，自动切换时间间隔duration为number类型，默认为500，滑动动画时长circular为boolean类型，默认为false，是否为衔接滑动display-multiple-items为number类型，默认为1，同时显示的滑块数量 swiper-item仅可放置在swiper组件中，宽高自动设置为100%。 属性说明item-id为string类型，为该 swiper-item 的标识符skip-hidden-item-layout为boolean类型，默认为false，是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 scroll-view可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性说明scroll-x默认为false，是否允许横向滚动scroll-y默认为false，是否允许纵向滚动show-scrollbar默认为true，滚动条显隐控制 (同时开启 enhanced 属性后生效)bindscroll滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}paging-enabled默认为false，分页滑动效果 (同时开启 enhanced 属性后生效)refresher-background设置自定义下拉刷新区域背景颜色refresher-default-style设置自定义下拉刷新默认样式，支持设置 `black icon图标组件 属性说明typeicon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizeicon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。coloricon的颜色，同 css 的color progress进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性说明percent百分比show-info默认为false，在进度条右侧显示百分比font-size右侧百分比字体大小border-radius圆角大小color进度条颜色active进度条从左往右的动画 text文本，为行内元素，类似于html中的span 属性说明user-select默认为false，文本是否可选，该属性会使文本节点显示为 inline-block rich-text富文本 属性说明nodes节点列表/HTML Stringuser-select文本是否可选，该属性会使节点显示为 block nodes现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。 //HTML String渲染 const htmlSnip = ` TitleLife is;like;a box of ;chocolates. ` //节点渲染 const nodeSnip = `Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.' }] }] } }) ` button 属性说明sizedefault 默认大小； mini 小尺寸typeprimary 绿色；default 白色；warn 红色––plain默认false，是否镂空disabled是否禁用loading名称前是否带 loading 图标form-type用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件；submit 提交表单；reset 重置表单 input 属性说明value输入框的初始内容texttext 文本输入键盘;number 数字输入键盘;idcard 身份证输入键盘;digit 带小数点的数字键盘;safe-password 密码安全输入键盘;nickname 昵称输入键盘password是否是密码类型placeholder输入框为空时占位符disabled是否禁用focus获取焦点cursor-spacing指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 image图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。 属性说明src图片资源地址mode图片裁剪、缩放的模式(具体属性值在下方)webp为Boolean类型，默认不解析 webP 格式，只支持网络资源lazy-loadboolean类型，图片懒加载，在即将进入一定范围（上下三屏）时才开始加载show-menu-by-longpress默认为false，长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。binderror当错误发生时触发，event.detail = {errMsg}bindload当图片载入完毕时触发，event.detail = {height, width} mode 属性值说明scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变top裁剪模式，不缩放图片，只显示图片的顶部区域bottom裁剪模式，不缩放图片，只显示图片的底部区域center裁剪模式，不缩放图片，只显示图片的中间区域left裁剪模式，不缩放图片，只显示图片的左边区域right裁剪模式，不缩放图片，只显示图片的右边区域top left裁剪模式，不缩放图片，只显示图片的左上边区域top right裁剪模式，不缩放图片，只显示图片的右上边区域bottom left裁剪模式，不缩放图片，只显示图片的左下边区域bottom right裁剪模式，不缩放图片，只显示图片的右下边区域 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |