E企盈营销工具技术服务商 热线:4006-838-530

小程序组件,微信小程序学习之路组件定义及属性view组件

E企盈直播平台营销卖货系统

小程序定义了各种各样的组件,它们在WXML中起着各不同的作用。与HTML元素一样,一个组件是指从组件开始标签到结束标签的所有代码,由于组件可能会被转译为不同端对应的代码,所以在页面创建过程中,不能使用小程序组件标签以外的标签。组件定义及属性1)组件是视图层的基本组成单元2)组件自带一些功能与微信风格的样式3)一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内按类型可以将组件划分为七大类:视图容器、基础内容、表单、导航、多媒体、地图、画布一个完整的组件结构如下:tagnameproperty=”value”contents/tagname组件可以通过属性进行配置,属性只能用在开始标签或单个自闭合标签上,不能用于结束标签。一个组件可以对应多个属性,属性具有名称和值两部分,组件的属性名称都是小写,以连字符“-”连接。组件属性分为所有组件都有的共同属性和组件自定义的特殊属性。1.组件的共同属性id:组件的唯一表示,保持整个页面唯一。class:组件里的样式类,在对应的WXSS中定义的样式类。style:组件的内联样式,可以动态设置的内联样式。使用方式同HTML标签style属性。hidden:组件是否显示,所有组件默认显示。data-:自定义属性,组件上触发事件时,会发送给事件处理函数。事件处理函数可以通过datascl获取。bind/catch:组件的事件,绑定逻辑层相关事件处理函数。bind为冒泡事件,catch为非冒泡事件。除上述属性以外几乎所有组件都有自定义属性,可以对该组件的功能或样式进行修饰,具体参考各个组件的定义。2.组件的属性类型每个属性都有其对应的类型,使用时应给属性值传入对应的类型值,属性按类型可分为:Boolean:布尔值,组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型。Number:数字。String:字符串。Array:数组。Object:对象。EventHandler:事件处理函数名。Any:任意属性。视图容器有过前端经验的同学都了解,在前端项目中我们常使用DIV+CSS进行页面布局,其中div/没有任何语义和功能,仅作为容器元素存在,在小程序中,有一套类似div/的容器组件,那就是view/、scroll-view/和swiper/。在HTML中大部分标签内部能嵌套任何标签,如div/、span/、section/、p/等,但是在小程序中,大部分组件都有它自己特殊的功能和意义,标签都有特定的用法,内部也只能嵌套指定的组件,而容器组件内部能嵌套任何标签,容器组件是构建布局的基础组件。本小节主要介绍视图类容器。View组件view/是一个块级容器组件,没有特殊功能,主要用于布局展示,是布局中最基本的UI组件,任何一种复杂的布局都可以通过嵌套view/组件,设置相关WXSS实现。view/支持常用的CSS布局属性,如display、float、position甚至Flex布局等,熟悉DIV+CSS的人应该很容易上手view/具备一套关于点击行为的属性:hover:是否启动点击态,默认值为falsehover-class:指定按下去的样式,当hover-时,没有点击态效果,默认值为nonehover-start-time:按住多久出现点击态,单位毫秒,默认值为50hover-stay-time:手指松开后点击态保留时间,单位毫秒,默认值为4001)水平3栏布局示例代码如下:viewstyle=”display:flex;”viewstyle=’background-color:red;flex-grow:1;height:180rpx;’/viewviewstyle=’background-color:blue;flex-grow:1;height:180rpx;’/viewviewstyle=’background-color:green;flex-grow:1;height:180rpx;’/view/view执行结果如下:2)左右混合布局示例代码如下:viewstyle=’display:flex;height:400rpx;’viewstyle=’background-color:red;width:250rpx;color:#fff;’1/viewviewstyle=’flex-grow:1;display:flex;flex-direction:column;’viewstyle=’flex-grow:1;background-color:blue;color:#fff;’2/viewviewstyle=’flex-grow:1;background-color:green;color:#fff’3/view/view/view执行结果如下:3)上下混合布局示例代码如下:viewstyle=”display:flex;flex-direction:column;height:400rpx;”viewstyle=’background-color:red;height:150rpx;color:#fff;’1/viewviewstyle=’flex-grow:1;display:flex;’viewstyle=”flex-grow:1;background-color:blue;color:#fff;”2/viewviewstyle=’flex-grow:1;background-color:green;color:#fff’3/view/view/view执行结果为:通过上面案例可以发现,任何复杂的布局都是通过不断嵌套view/实现的,在小程序中使用view/就像我们在HTML使用div/一样边界,通过view/我们可以构建我们想要的任何页面。Scroll-view组件在布局过程中,我们需要一些容器具备可滑动的能力,尽管我们可以通过给view/设置overflow:scroll属性来实现,但由于小程序实现原理中没有DOM概念,我们没法直接监听view/滚动、触顶、触底等事件,这时便需要使用scroll-view/。scroll-view/在view/基础上增加了滚动相关属性,通过设置这些属性,我们能响应滚动相关事件。scroll-view/属性如下:scroll-x:允许横向滚动,默认为falsescroll-y:允许纵向滚动,默认为falseupper-threshold:距顶部/左边多远时(单位px),触发scrolltoupper事件,默认值为50lower-threshold:距底部/右边多远时(单位px),触发scrolltolower事件,默认值为50scroll-top:设置竖向滚动条位置scroll-left:设置横向滚动条位置scroll-into-view:值应为某子元素id,滚动到该元素时,元素顶部对齐滚动区域顶部bindscrolltoupper:滚动到顶部/左边,会触发scrolltoupper事件bindscrolltolower:滚动到底部/右边,会触发scrolltolower事件bindscroll:滚动时触发,event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}目前,有些组件不能在scroll-view/中使用:textarea/、video/、map/、convas/下面我们创建一个可滚动视图区,示例代码如下:scroll-viewupper-threshold=”0″lower-threshold=”100″scroll-into-view=”{{toView}}”bindscroll=”scroll”bindscrolltolower=”scrollToLower”bindscrolltoupper=”scrollToUpper”scroll-y=”true”scroll-top=”{{scrollTop}}”viewid=’item-1’class=’scroll-itembg-red’1/viewviewid=’item-2’class=’scroll-itembg-blue’2/viewviewid=’item-3’class=’scroll-itembg-red’3/viewviewid=’item-4’class=’scroll-itembg-blue’4/viewviewid=’item-5’class=’scroll-itembg-red’5/viewviewid=’item-6’class=’scroll-itembg-blue’6/view/scroll-viewviewclass=’act’buttonbindtap=’scrollToTop’点击滚动到顶部/button/view.scroll-container{border:solid1px;height:2400rpx;}.scroll-container.scroll-item{height:300rpx;width:120%;}.bg-blue{background-color:#87CEFA;height:400rpx;}.bg-red{background-color:#FF6347;height:400rpx;}.act{padding:10px;}Page({data:{toView:’item3’//第一次渲染时,scroll-view默认滚动到id值为”item-3″”区域},scrollToUpper:function(){console.log(‘触发到滚动顶部事件’);},scrollToLower:function(){console.log(“触发滚动到底部事件”);},//点击按钮时,滚动到顶部scroll:function(){console.log(‘触发了滚动事件’);},scrollToTop:function(){this.setData({scrollTop:’0′});}});执行结果如下:滑块视图组件滑块视图容器在前端开发中是一个常见组件,利用它我们可以实现轮播图、滑动页面、图片预览效果等。一个完整的滑块视图组件由swiper/和swiper-item/连个标签组成,它们不能单独使用,一个swiper/中只能放置一个或多个swiper-item,放置其他节点会被删除,swiper-item/内部能放置任何组件,默认宽高自动设置为100%。swiper-item/组件作为容器没有任何特殊属性,swiper/组件属性如下:indicator-dots:是否显示面板指示点,默认值为falseautoplay:是否自动切换,默认为falsecurrent:当前所在页面的index,默认值为0interval:自动切换时间间隔,默认值为5000duration:滑动动画时长,默认值为1000circular:是否采用衔接动画,默认值为falsebindchange:current改变时会触发change事件,event.detail={current:current};1)基本轮播图示例代码如下:swiperindicator-dots=”true”autoplay=”{{autoplay}}”current=’0’interval=’2000’duration=’300’bindchange=’change’blockwx:for=”{{sliderList}}”swiper-item{{item.name}}/swiper-item/block/swiperviewbuttonbindtap=’play’暂停|播放/button/view.banner{height:400px;background-color:#ddd;}.bg-blue{background-color:#87CEFA;}.bg-red{background-color:#FF6347;}.bg-green{background-color:#43CD80;}Page({data:{autoplay:true,sliderList:[{className:’bg-red’,name:’slider1′},{className:’bg-blue’,name:’slider2′},{className:’bg-green’,name:’slider3′}]},play:function(){this.setData({autoplay:!this.data.autoplay});},change:function(){console.log(‘执行了滚动’);}});执行结果如下:2)自定义轮播图swiper/默认组件中不能提供面板指示点的样式设置,而在轮播组件中,我们常常需要设置自定义面板指示点,这时可以通过bindchange事件来实现示例代码如下:swiperindicator-dots=”{{indicatorDots}}”autoplay=”{{autoplay}}”interval=”{{interval}}”duration=”{{duration}}”blockwx:for=”{{image}}”swiper-itemimagestyle=’width:100%;height:100;’src='{{item}}’/image/swiper-item/block/swiperPage({data:{image:[‘images/un1.jpg’,’images/un2.jpg’,’images/un3.jpg’],indicatorDots:true,//是否显示面板指示点autoplay:true,//是否自动切换interval:3000,//自动切换时间间隔duration:1000,//滑动动画时长}});执行结果如下:具体WXSS这里就不显示了,希望大家能够自己尝试一下,其中图片路径不要搞错!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序组件,微信小程序学习之路组件定义及属性view组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏