7、lt;/viei>vviewclass=0sectionu>
10、滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时(单位PX),触发scrolltoupper事件lower-thresholdNumber50距底部/右边多远时(单位PX),触发scrolltolower事件scroll-topNumber设置竖向滚动条位置scroll-leftNumber设置横向滚动条位置scroll-into-viewString值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部bindscrolItoupperEventHandle滚动到顶部/左边,会触发scrolltoupper
11、事件bindscrolItolowerEventHandle滚动到底部/右边,会触发scrolltolower事件bindscrollEventHandle滚动时触发,event.detail=scrollLeft,scrolllop,scrollHeight,scrollWidth,deltaX,deltaY)1.纵向滚动允许内容纵向滚动,需要给scroll-view/)一个固定高度,可以绑定滚动到顶部/左边(bindscrolltoupper)、滚动到底部/右边(bindscrol1tolower)、滚动时(bindscroll)触发的事件,也可以滚动到指定的id区
12、域(scroll-into-view)o下面实现纵向滚动,如图所示。VVEChflCtcro1:r!evWW向该动dickmetoscrollintovieclickaetoscroll纵向滚动(1)在wxml文件里使用scroll-view进行布局,设置scroly="true"纵向滚动,绑定bindscrolltoupper>bindscrolItolowerbindscroll>scroll-into-view>scroll-top事件,具体代码如下。 14、t; 15、%:height:100px;background-color:l)lue;0> 17、log(e),scroll:function(e)console.log(e),tap:function(e)for(vari=0:i 18、2.横向滚动在使用“今日头条”或“腾讯新闻”时,在新闻列表的上方都会有新闻频道供我们选择,可以向左滑动和向右滑动来查看相应类别的新闻,可以采用scroll-view来实现这些新闻频道的横向滚动。劭4014:04中d$51%,今日头条Qq科技汽车体日财短年事+aNBA督展怪物:历史展长2米59.周埼为顶级,餐短不是格里芬!C25图看NBA出现的奇葩发型:大本发型增aca公分如爪。管镇性”今日头条新闻频道在wxml文件里使用scroll-view进行布局,设置scroll-x="true”横向滚动,具体代码如下。viewclass=,sectionM>viewc 24、信息,是很多网站或者App软件都会采用的一种布局方式,如图所示。VfeChatQFOLLOU%esflLVVeChat海报1海报2(1)在wxml文件里,采用swiper滑块视图容器组件进行海报轮播区域的布局,具体代码如下:vviewclass=MhaibaoM> 31、ont-size:12px;margin:0auto;padding:15px;.hrborder:1pxsolid#cccccc;opacity:0.2;I(3)进入到js文件里,提供窗口的宽度、高度、当前面板的索引值,提供页签切换函数,具体代码如下。Page(data:currentTab:0,winVidth:0,winHeight:0,onLoad:function(options)varpage=this;wx.getSystemInfo(success:fiinction(res)console.log(res);pageetData( 33、.4movable-view可移动视图容器movable-view是一个可移动视图容器,在页而中可以做拖曳滑动。在使用这个组件的时候,需要先定义可移动区域movable-area,然后定义直接子行点movable-view,否则不能移动。movable-area必须设置width和height属性,不设置默认为10px;movable-view必须设置width和height属性,不设置默认为10px,movable-view默认为绝对定位,top和left属性为Opx。movable-view可移动视图容器的属性如表所示。movable-view属性属性类型默认值说明dire 34、ctionStringnonemovable-view的移动方向,属性值有all、verticalshorizontalnoneinertiaJooleanfalsemovable-view是否带有惯性out-of-boundsJooleanfalse超过可移动区域后,movable-view是否还可以移动Xdumber/String定义X轴方向的偏移,如果X的值不在可移动范围内,会自动移动到可移动范围;改变X的值会触发动画ydumber/String定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围:改变y的值会触发动画dampingdumber20阻尼系数 35、,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快frictiondumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值disabledbooleanfalse是否禁用scaleJooleanfalse是否支持双指缩放,默认缩放手势生效区域是在movable-view内scale-mindumber0.5定义缩放倍数最小值Scale-maxdumber10定义缩放倍数最大值scale-valuedumber1定义缩放倍数,取值范围为0.510bindchangeiventHandle拖动过程中触发的事件,event, 36、detail=x:x,y:y,source:source,其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)bindscaleSventHandle缩放过程中触发的事件,event,detail=scale:scale)movable-view提供了两个特殊事件:htouchmove事件,指初次手指触摸后的移动为横向移动,如果catch此事件,则意味着touchmove事件也被catch; 38、:M> 39、detail),onScale:function(e)console.log(e.detaili)3.1.5cover-view覆盖原生组件的视图容器cover-view.cover-image这两个是覆盖原生组件的视图容器。比如在使用地图组件时,地图组件本身的功能很有局限,但是想放置一些特殊的内容或图片,这时就需要使用覆盖地图组件的视图容器。cover-view是指覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera只支持嵌套cover-viewcover-image0cover-image是指覆盖在原生组件之上的图片视图,可覆盖 41、10421301f02016904025348()4102ca905ce62()bl241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparain=302c()20101042530230204136ffd93()20457e3c4ff02024ef202031e8d7fl)2030f42400204045a320a0201000400Hcontrols=0falseMevent-model=,bubbleHstyle=Mwidth:100%M> 43、gt; 44、a(h0A.5);color:white;line-height:50px;imgwidth:40px;height:40px;margin:5Pxauto;(3)在js文件里,提供视频播放、暂停函数,初始化视频播放组件,具体代码如下。Page(onReadyOthis.videoCtx=wx.createVideoContextCmyVideo*),playOthis.videoCtx.playO,pause。this.videoCtx.pauseO!)3.2基础内容组件基础内容组件包括icon图标组件、text文本组件、progree进度条组件、rich-tex 52、e/>界而效果如图所示。20%进度条效果3.2.4rich-text富文本rich-text富文本组件,可以在WXML页面文件显示一些富文本内容,比如显示HTML的一些元素内容。它有一个nodes廿点列表属性,nodes属性推荐使用Array类型,由于组件会将String类型转换为Array类型,因而性能会有所下降。nodes支持两种节点,通过type来区分,分别是元素节点和文本节点,它默认的是元素节点,即在富文本区域里显示的HTML节点。1元素节点:type=node属性类型默认值说明name标签名String支持部分受信任的HTML节点attrs属性Object支持部分 55、钮:默认和mini两种大小按钮,如图所示。按钮类型和大小button按钮组件有很多属性,每个属性有不同的作用,如表所示。按钮属性属性类型默认值说明sizeStringDefault有效值为:defaultsminitypeStringDefault按钮的样式类型,有效值为primary、default、warnplainBooleanFalse按钮是否镂空,背景色透明disabledBooleanFalse是否禁用loadingBooleanFalse名称前是否带loading图标form-typeString无有效值为:submit%reseto用于form/组件,单击分别会触发s 57、Hsize=MdefaultSize)Mloading=Mloadingnplain=HplainMdisabled=*disabledMbindtap=MdefaultM>default 58、loading=Hloadingnplain=Mplaiii)Mdisabled=Mdisabled)Mbindtap=MwarnM>warn