本文共 11134 字，大约阅读时间需要 37 分钟。

先来再看看事件冒泡: 看个例子,新建项目库credemo05 case1.wxml <view bindtap="fn1"> outer    <view bindtap="fn2">    middle        <view bindtap="fn3">          inner        </view>    </view> </view> 去看看效果,再来看看catch什么意思? 他是阻断事件冒泡的. case1.wxml <view bindtap="fn1"> outer    <view bindtap="fn2">    middle    //1.这里用catch        <view catchtap="fn3">          inner        </view>    </view> </view>   然后写case1.js fn1:function(){ console.log('inner'); }, fn2:function(){ console.log('middle'); }, fn3:function(){ console.log('outer'); }, 好,开始新的课程,今天主要说组件: 帮助文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常见的组件: 视图容器 基础内容 表单组件 导航 媒体 地图 画布 客服会话 ------------------ 咱们通过案例给大家说: 案例1：轮播图 案例2：下拉加载更多。。。 案例3：进度条 案例4：嵌入页面滚动器:就是比如选择一个出生年月对吧                       滚动选择几几年出生这样. 案例5：选择器:单个的选择 案例6：注册登录 案例7：开关选择器 案例8：各种图标 案例9：页面跳转 案例10：多媒体音视频 案例11：嵌入地图 案例12：画布 ------------------------- 好,咱们先来看前6个 案例1：轮播图: https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html swiper 滑块视图容器。 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点:这个指的是                                                    显示的时候的小点. indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 （这个属性目前暂未启用） indicator-active-color Color #000000 当前选中的指示点颜色 （这个属性目前暂未启用） autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的 index interval Number 5000 自动切换时间间隔 duration Number 500 滑动动画时长 circular Boolean false 是否采用衔接滑动 bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current} 注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。 好,咱们来试试: swiper-item 仅可放置在<swiper/>组件中，宽高自动设置为100%。 他指的是每一张轮播的图片. 好,新建一个页面case2 case2.wxml //1.这样写就可以了每个参数是什么意思,都有写的对吧. // <view class="page"> <swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {true}}" interval="{ {interval}}"  duration="{ {duration}}"> <swiper-item> <image src="/imgs/1.jpg" width="750rpx" height="130"/> </swiper-item> <swiper-item> <image src="/imgs/2.jpg" width="750rpx" height="130"/> </swiper-item> <swiper-item> <image src="/imgs/3.jpg" width="750rpx" height="130"/> </swiper-item> <swiper-item> <image src="/imgs/4.jpg" width="750rpx" height="130"/> </swiper-item> </swiper> </view> ----------------------------- 把找好的图片放到和代码pages文件夹同目录的目录中 然后写一写: case2.wxss 这里的width="750rpx" height="130"也可以写到 wxss中,而且应该写在wxss中,否者可能会有点问题. case2.wxss image{ width:750rpx; } case2.js中定义数据: Page({ data:{ //1.这里定义数据 // indicatorDots:true, interval:4000, duration:1000, }, onLoad:function(options){ }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) -------------------------- 然后把页面设置成首页case2: app.json {   "pages":[   //1.这里添加   //    "pages/case2/case2",    "pages/case1/case1",     "pages/index/index",     "pages/logs/logs"   ],   "window":{     "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "WeChat",     "navigationBarTextStyle":"black"   } } ------------------------------------ 看看,效果好,这是静态的,咱们看看动态的图片怎么做: case2.wxml <view class="page center"> <swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {true}}" interval="{ {interval}}"  duration="{ {duration}}"> //1.这里用这个block循环一个数组 // <block wx:for="{ {imgs}}">    <swiper-item>        <image src="{ {item}}"  height="130"/>    </swiper-item> </block> </swiper> </view> case2.js中定义图片数据: Page({ data:{ indicatorDots:true, interval:4000, duration:1000, //1.所有的图片数据 //这个图片数据 // imgs:[ '/imgs/1.jpg', '/imgs/2.jpg', '/imgs/3.jpg', '/imgs/4.jpg',] }, onLoad:function(options){ }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ------------------------- 看看效果. 好,咱们看,图片是铺满整个屏幕的对吧 咱们如果想让图片,距离左右都有一定距离,咱们看看怎么做? case2.wxss image{ //1.750-->730 width:730rpx; } 可以看到图片居左了对,不对 好,咱们来写个样式在app.wxss中,这样其他的页面也能用了 app.wxss: ----------------------- /**app.wxss**/ .container {   height: 100%;   display: flex;   flex-direction: column;   align-items: center;   justify-content: space-between;   padding: 200rpx 0;   box-sizing: border-box; }  //1.这里对吧. .center{ text-align:center; } 然后在: case2.wxml中: //1.这里添加整个center样式 <view class="page center"> <swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {true}}" interval="{ {interval}}"  duration="{ {duration}}"> <block wx:for="{ {imgs}}">    <swiper-item>        <image src="{ {item}}"  height="130"/>    </swiper-item> </block> </swiper> </view> ------------------- 看看效果,左右居中了对吧. 好,再看看,如果不想让图片播放的时候,小点显示的话,那么 case2.js Page({ data:{ //1.这里改成false就行了. // indicatorDots:false, interval:4000, duration:1000, imgs:[ '/imgs/1.jpg', '/imgs/2.jpg', '/imgs/3.jpg', '/imgs/4.jpg',] }, onLoad:function(options){ }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) --------------------------- 好,再看看下拉加载 https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html scroll-view 可滚动视图区域。 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scroll-top Number 设置竖向滚动条位置 scroll-left Number 设置横向滚动条位置 scroll-into-view String 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部 bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件 bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件 bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。 好,咱们直接看功能 新建一个页面case3: case3 case3.js case3.wxml case3.wxss 先看看: case3.wxml <view class="page"> <scroll-view class="scroll" scroll-y="{ {true}}"  style="height:300px" scroll-top="10"  bindscrolltolower="lower" bindscrolltoupper="upper"> <view class="inner"> hello </view> </scroll-view> </view> case.wxss .scroll{ background-color:blue; } .inner{ //1.这里设置500,外面那个是300 height:500px; } 这里设置一下看看: 比如背景颜色,里面有个view对吧,这个高度要比外面的scroll-view的高度 高,要不然就不会有滚动条了对吧 好,这里,咱们再看看,当用户滑动,滚动条,比如到距离 scroll-view 10像素的时候就触发相应的事件去加载数据对吧. 好,咱们看看: 咱们给,上滑下滑都绑定了事件对吧. 比如: case3.wxml中:  scroll-top="10"  bindscrolltolower="lower" bindscrolltoupper="upper" 距离上或者下,10像素的时候,执行lower或者upper事件 咱们把事件添加上看看: case3.js Page({ data:{ }, onLoad:function(options){ }, lower:function(e){ console.log('lower'); }, upper:function(e){ console.log('upper'); }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ----------------- 好,咱们把事件加上后,看看效果对吧. 滑动的时候,控制台打印出了数据了. 好,接下来咱们看看进度条 咱们看看帮助文档: progress 进度条。 属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Number 6 进度条线的宽度，单位px color Color #09BB07 进度条颜色 active Boolean false 进度条从左往右的动画 咱们新建一个页面 case4 case4.js case4.wxml case4.wxss case4.wxml <view class="page"> //1.每个属性试一下看看效果. // <progress  percent="100" active show-info stroke-width="20" color="blue"/> </view> 然后: app.json中: {   "pages":[   //1.这里添加case4   //    "pages/case4/case4",     "pages/case3/case3",    "pages/case2/case2",    "pages/case1/case1",     "pages/index/index",     "pages/logs/logs"   ],   "window":{     "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "WeChat",     "navigationBarTextStyle":"black"   } } --------------- 看下一个效果,滚动选择 咱们看看: 新建case5 case5.js case5.wxss case5.wxml https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html 需要用到组件 picker-view 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number          Array 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 indicator-style String 设置选择器中间选中框的样式 bindchange EventHandle 当滚动选择，value 改变时触发change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） 注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。 picker-view-column 仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与 picker-view的选中框的高度一致 好,咱们做这样一个东西,每个地区,有不同的技术方向,不同的班级 case5.wxml <view class="page"> <view style="text-align:center"> //1.这里读取js中定义的数据 //滑动的时候触发事件会自动改变这里的值 //在事件中会重新设置js文件中定义的这些数据 // { {seladdr}}-{ {selcour}}-{ {selclz}} </view> //2.用picker-view声明一个滚动器 // bindchange="change"绑定事件 // <picker-view value="{ {value}}"  bindchange="change" indicator-style="height:50px;"   style="width:100%;height:300px"> //3.<picker-view-column> //每一个<picker-view-column>是一个列 // <picker-view-column> <view wx:for="{ {address}}" style="line-height:50px;"> { {item}} </view> </picker-view-column> <picker-view-column> <view wx:for="{ {course}}" style="line-height:50px;"> { {item}} </view> </picker-view-column> <picker-view-column> //3.循环每列信息 <view wx:for="{ {clz}}" style="line-height:50px;"> { {item}} </view> </picker-view-column> </picker-view> </view> --------------------- 定义数据 case5.js Page({ data:{ //1.这里定义数据 seladdr:'济南', selcour:'HTML5', selclz:1703, value:[0,0,0], address:['大连','济南','武汉','乌克兰'], course:['HTML5','ANDROID','.NET','JAVA'], clz:[1601,1602,1703,1704,1405,1506] }, //2.这里来定义滚动时触发的事件 // change:function(e){ var val=e.detail.value; this.setData({ seladdr:this.data.address[val[0]], selcour:this.data.course[val[1]], selclz:this.data.clz[val[2]] }) }, onLoad:function(options){ }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ----------------- app.json {   "pages":[      "pages/case5/case5",    "pages/case4/case4",     "pages/case3/case3",    "pages/case2/case2",    "pages/case1/case1",     "pages/index/index",     "pages/logs/logs"   ],   "window":{     "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "WeChat",     "navigationBarTextStyle":"black"   } } 看看效果,然后 -------------------------- 好,接下来看下一个 选择器: https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 用picker组件: picker 从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。 普通选择器：mode = selector 属性名 类型 默认值 说明 range Array / Object Array [] mode为 selector 时，range 有效 range-key String 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 value Number 0 value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。 bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean false 是否禁用 时间选择器：mode = time 属性名 类型 默认值 说明 value String 表示选中的时间，格式为"hh:mm" start String 表示有效时间范围的开始，字符串格式为"hh:mm" end String 表示有效时间范围的结束，字符串格式为"hh:mm" bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean false 是否禁用 日期选择器：mode = date 属性名 类型 默认值 说明 value String 0 表示选中的日期，格式为"YYYY-MM-DD" start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" fields String day 有效值 year,month,day，表示选择器的粒度 bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean false 是否禁用 注意：开发工具暂时只支持mode = selector。 好,试试,新加一个页面 case6 case6.js case6.wxss case6.wxml -------------------------- 咱们用picker来实现选择器: case6.wxml: <view class="page"> <picker bindchange="change" value="{ {index}}" range="{ {arrayObject}}"> <view class="picker"> { {arrayObject[index]}} </view> </picker> </view> case6.js Page({ data:{ //1.定义数据 arrayObject:['济南','北京','大连'],    index:0 }, //2.绑定数据 // change:function(e){ this.setData({ index:e.detail.value }) }, onLoad:function(options){ }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) 最后这个功能,是一个注册登录的,使用input那个组件来实现就可以了.

转载地址：https://credream.blog.csdn.net/article/details/56278807 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！