小程序常用组件-视图容器

本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。

共同属性

小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。

  • id: 标识组件的唯一性。
  • class: 组件的样式类,在*.wxss中定义该样式
  • style: 组件的内联样式,动态设置的内联样式
  • hidden: 组件是否显示,默认为 false, 即默认显示
  • data-*: 自定义属性,组件上触发事件时,会发送给事件处理函数,可以通过dataset获取
  • bind*/catch*:将组件的事件和逻辑层的处理函数进行绑定,其中bind:冒泡事件(继续向上层分发),catch:非冒泡事件(停止向上分发事件)

容器组件

容器组件:内部能嵌套任何标签。常用的视图容器有:view, scroll-view, swiper

1. view组件

<view/> 是一个块级容器组件,任何一种复杂的布局都可以嵌套在<view/> 组件内,并在*.wxss中设置相关样式。

<view/> 除了上述组件共有的属性外,还包含一组关于点击行为的属性。

  • hover: 是否启动点击态,默认为false
  • hover-class: 指定按下去的样式,默认为none,即hover-class = "none",没有点击态效果
  • hover-start-time: 按住后延迟多少毫秒出现点击态,单位:ms, 默认为50ms
  • hover-stay-time: 手指松开后,点击态保持事件,单位:ms, 默认为400ms
2. scroll-view 组件

在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶、触底等事件,就需要<scroll-view/> 组件,<scroll-view/><view/> 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。

  • scroll-x : 允许横向滚动,默认为false
  • scroll-y : 允许纵向滚动,默认为false
  • upper-threshold: 触发scrolltoupper 事件时, 距顶部/左边多少距离(单位为:px)
  • lower-threshold: 触发scrolltolower事件时,距底部/右边多少距离(单位为:px)
    -scroll-top: 设置竖向滚动条位置
    -scroll-left: 设置横向滚动条位置
    -scroll-into-view: 值为某子元素的id, 该子元素滚动到顶部对齐滚动区域顶部
    -bindscrolltoupper: 滚动到顶部/左边,会触发scrolltoupper 事件
    -bindscrolltolower:滚动到底部/右边,会触发scrolltolower 事件
    -bindscroll: 滚动时触发,其中函数参数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

注意:
<textarea/>,<video/>,<map/>,<canvas/> 不能嵌套在<scroll-view/>中使用

3. swiper组件-滑块视图组件

利用swiper 组件,可以实现轮播图,滑动页面,预览图片等,一个完整的滑块视图软件由<swiper/><swiper-item/> 两个标签组成,不能单独使用。一个<swiper/> 只能嵌套一个或多个<swiper-item/>标签,放置其它的标签会被删除,其中,<swiper-item/> 中能放置任何标签,高度默认为100%,另外没有任何其它特殊属性。

<swiper/> 的属性如下:

  • indicator-dots: 是否显示面板指示点,默认:false
  • autoplay: 是否自动播放,默认: false
  • current: 当前所在页面的index, 默认:0
  • interval: 自动切换时间间隔,默认:5000ms
  • duration: 滑动动画时间间隔,默认:1000ms
  • circular: 是否采用衔接动画播放,默认:false
  • bindchange: current 改变时触发change事件,回调函数参数event.detail = {current}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文为菜鸟窝编辑吴佳林的连载。 小程序的视图容器主要有三种,分别是 view,scroll-view,swiper...
    菜鸟窝阅读 4,168评论 0 1
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,902评论 1 11
  • 如果你有心事,是关于什么呢 为看到的日出?为相遇的陌生人 还是肩披月色而归,从未有一盏守候回来的灯 如果你有心事,...
    经年未归阅读 1,751评论 0 0
  • 恋春花俏,黄海如潮, 绿芽嫩娇引人陶。 花开花谢花终笑, 蜂来蜂去蜂最劳。 夜来景好,霓虹妩媚, 璀璨波涛羞星月。...
    冬蝉子阅读 1,657评论 0 2

友情链接更多精彩内容