微信小程序开发(五)模板.docx

微信小程序开发(五)微信小程序开发(五)第五章表现层组件小程序组件框架构成(第一部分)小程序组件(启)视图容器Viewcontainer普通视图View滚动视图Scroll-view滑动视图swiper基础内容Basecontent图标icon文字text进度progress操作反馈Operationinteration上拉菜单Action-sheet模态窗口model自消窗口toast页面导航Pagenavigation导航navigator小程序组件框架构成(第二部分)小程序组件(承)页面表单Pageform按钮button表单form输入input多选checkbox单选radio列表选picker内嵌列选Picker-view滑选slider切换switch标签label多媒体Multimedia音频audio视频video图片iimage小程序组件框架构成(第三部分)小程序组件(承)地图map地图map画布canvas画布canvas客服会话session客服会话Contact-button视图容器:VIEWCONTAINER:VIEW+横向排列<viewclass="flex-wrp"style="flex-direction:row;"><viewclass="flex-itembc_green"></view><viewclass="flex-itembc_red"></view><viewclass="flex-itembc_blue"></view></view>+纵向排列<viewclass="flex-wrp"style=”flex-direction:column;"><viewclass="flex-itembc_green"></view><viewclass="flex-itembc_red"></view><viewclass="flex-itembc_blue"></view></view>:SCROLL-VIEW+上下滚动<scroll-viewscroll-y=”true”> <viewclass=”scroll-view-itembg=red”></view><viewclass=”scroll-view-itembg=blue”></view></scroll-view>+左右滚动<scroll-viewclass=”scroll-view-h”scroll-x=”true”> <viewclass=”scroll-view-item_hbg=red”></view><viewclass=”scroll-view-item_hbg=blue”></view></scroll-view>:SWIPER+轮播图<swiperindicator-dots=3autoplay=trueinterval=50duration=10> <blockwx:for={{imageUrls}}> <swiper-item> <imagesrc={{item}}/> </swiper-item> </block></swiper>基础内容:BASECONTENT基础内容包括:图标,文本,:ICON+图标<icontype=esssize=40/><icontype=esssize=40/>√√文本:TEXT+文本<view> <text>{{text}}</text> <buttonbindTap=add>addline</button> <buttonbindTap=remove>removeline</button></view>AddlineRemoveline进度条:PROGRESS+进度条<progresspercent=20show-info/><progresspercent=30stroke-width=30/><progresspercent=40active/><progresspercent=35color=pink/>20%页面表单:PAGEFORM=表单组件+button<buttontype=pramarybindrap=hdl></button>+checkBox<checkboxvalue=vchecked=true/>+radio<radiovalue=vchecked=true/>+input<inputplaceholder=enter/>+label<label>…</label>+picker<pickermode=time|datevalue={{idx}}range={{ary}}> <view>{{ary[idx]}}</view></picker>+slider<sliderstep=1bindchange=evt