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