组件库 · 多谷微信平台开发指南

[TOC] # Vuep 组件库组件是构成插件的基础组件，这些组件提供常用的布局。 ## Box Box 组件，声明一个div容器，提供快速布局。 **属性** - type 包含 [group,box,image,layer] 可以自定义type。需要自行解析 - width 资源宽度。如果需要水平居中，此值必填，例：200、200px、20em... - height 资源高度。如果需要垂直居中，此值必填,例：同上 - x 资源的相对x坐标,相当于 left 例：同上 - y 资源的相对y坐标,相当于 top 例：同上 - r 资源距离画布右侧的值，相当于box的right值例：同上 - b 资源距离画布底部的值相当于box的bottom值例：同上 - z 图层的优先级(z-index)，默认为优先级叠加 - center 居中方式，可选（x,y,xy） - position 的值,图层默认以absolute定位，['absolute','static','fixed','relative'] - opacity 当前层的透明度 - ani css3动画同 animation - bg 背景 - bgMode string 背景的填充方式[repeat,round,space,repeat-x,repeat-y,cover,contain,background] - [废弃]src 当前层的绑定资源，可用作背景图片处理 - [废弃] mode 层的解析定位方式 **实例** ```html <div id="app" v-cloak>  <box width="640" height="1008" bg="url(../assets/texture.jpg)">  <box width="200" height="200" x="30" y="30" bg="#ccc"> width="200" height="200" x="30" y="30" </box> <box width="30" height="30" r="30" y="30" bg="#ccc"> width="200" height="200" x="30" y="30" </box>  <box width="200" height="200" y="60" center="x" bg="#ccc"> width="200" height="200" y="60" center="x" </box>  <box width="200" height="200" center="y" bg="#ccc"> width="200" height="200" center="y" </box>  <box width="200" height="200" center="xy" bg="#ccc"> width="200" height="200" center="xy" </box>  <box width="200" height="200" r="0" b="0" bg="#ccc"> width="200" height="200" r="0" b="0" </box> <box width="200" b="0" center="x" bg="#ccc"> width="200" b="0" center="x" </box> </box> </div> ``` ## Grouper Grouper组件创建一个分组，内部的组件都是相对此组件的位置布局 **属性** - 基础属性继承box - layer [string] 可以使用资源声明组件（主要为ps导出的分组配置） **示例** ```html <Grouper layer="bottomBtns" center="xy"> <Imager /> <Imager /> <Grouper> ``` ## Imager 图片组件，可从资源库中加载已经被load的图片，或者直接设置图片的src **属性** - 基础属性继承 box 组件 - src [可选] 图片路径 - layer [图层名称] resource 中的别名 - alt 图片的alt属性 - bgMode [boolean,string] boolean 时表示资源图片是否为背景。string时同box的bgmode属性 ** 示例 ** ```html  <imager src="share.jpg" center="x"></imager>  <imager src="bg.jpg" width="200" height="200" bg-mode> <input type="text" /> </imager>  <imager layer="share_btn" @click.native="todo"></imager>  <imager layer="share_btn" @click.native="todo" :y="1008-20"></imager> ``` ## Row Row 行组件，提供常用布局方案 **属性** - gutter 组件两边的留白(注意：这个单位是相对于设计稿的单位，最后会转换为rem) - direction `flex-direction` 的种类，目前包含[reverse,column,reverse] - justify `justify-content` 可选[start,center,end,around,between] - align `align-items` 可选 [top,middle,down,stretch,baseline] **示例** 通常是配合column一起使用，参考column组件 ## Column Column 列，列模型将一行分为24份。 **属性** - `span` 当前列所占宽度 - `offset` 向左移动的宽度 - [废弃] `pull` 向左推的宽度 ```html <div id="app" v-cloak> <row> <column>1</column> <column>2</column> </row> <row :gutter="30"> <column>1</column> <column>2</column> </row> <row> <column :span="1">1</column> <column :span="2">2</column> <column span="3">3</column> <column span="4">4</column> <column span="5">5</column> <column span="6">6</column> </row> <row> <column :span="8" offset="3">span8 offset3</column> </row> <row> <column :span="6" offset="1">1</column> </row> </div> ``` ## MovieClip 影片剪辑，可以通过影片剪辑播放序列帧动画。 **属性** - source 已经处理好了等距分隔的图片素材路径。 - width 帧动画所占宽度 - height 帧动画所占高度 - frame 动画帧数 - paused 是否暂停 - vertical 默认为横向平铺，素材是否为纵向平铺 **实例** ```html  <box center="x" y="20"> <movie-clip width="75" height="90" frame="80" fps="60" source="../assets/movieClip1.png"></movie-clip> </box>  <movie-clip :paused="movieClipPause" width="230" height="202" frame="46" fps="30" source="../assets/movieClip3.png" @click.native="movieClipPause=!movieClipPause"></movie-clip>  <movie-clip width="640" height="1008" frame="20" fps="24" source="../assets/gifs.png" :vertical="true"></movie-clip> ``` ## ScrollView 一个惯性滚动插件，提供更加柔和的滚动方式 **属性** - width: `滚动容器宽度` - height: `滚动容器高度` - startX: `0` 开始的X轴位置 - startY: `0` 开始的Y轴位置 - horizontal 'true' 滚动方向为 X 轴 - threshold: `5` - momentum: `true` 当快速滑动时是否开启滑动惯性 - bounce: `true` 是否启用回弹动画效果 - [废弃] scrollY: `true` 滚动方向为 Y 轴 - [废弃] scrollX: 'true' 滚动方向为 X 轴 - [废弃]click: `true` 是否派发click事件 - [废弃]reachBottom 底部适合你拉阈值，设置此值可接受底部的上拉事件，会触发onReachBottom 事件，一般用于加载更多 - [废弃]reachTop 向上滑动阀值，设置此值可接受到顶部的下拉事件，会触发 onReachTop 事件，一般用于刷新当前数据 - [废弃]selectedIndex: `0` wheel 为 true 时有效，表示被选中的 wheel 索引 - [废弃]rotate: `25` wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度 - [废弃]wheel: `false` 该属性是给 picker 组件使用的，普通的列表滚动不需要配置 **事件** - `on-before-scroll-start` 滚动开始之前触发 - `on-scroll-start` 滚动开始时触发 - `on-scroll-cancel` 取消滚动时触发 - `on-scroll` 滚动时触发 - `on-scroll-end` 滚动结束时触发 - `on-refresh` 当 better-scroll 刷新时触发 - `on-destroy`销毁 better-scroll 实例时触发 **示例** ```html <div id="app" v-cloak>  <Scroll-View height="300px" @on-scroll="onScroll" @on-reach-top="onReachTop"> <ul class="list-wrapper"> <li v-for="n in lists" class="list-item">{{ n }}</li> </ul> </Scroll-View> <Scroll-View width="1680px" horizontal> <ul class="list-btn"> <li v-for="n in lists" class="list-item">{{ n }}</li> </ul> </Scroll-View> </div> ``` ## Swiper 翻页根容器，所有的页面组件的根组件,此页面对当前组内的所有page进行基本配置设置 **属性** - v-model 可以双向绑定值到此组件，model的值为page的name值。 - path [string] '' 图层图片资源的根目录 - layout [string] html 布局方式[html,canvas,webgl] 目前只支持html - base [number] 16 在psd中的根字体大小，即rem单位 1rem = html.fontSize - width [number] 640 设计稿宽度 - height [number] 1008 设计稿高度 - perspective [number,string] 1200 3d透视距离，page切换3d效果可能需要 **事件** - ready 加载完成事件 - progress 进度事件 **示例** ```html <swiper v-model="page" path="assets/images/" @progress="onProgress" @ready="onReady"></swiper> ``` ## Page 翻页页面组件 **属性** - name 页面名称，用于实现跳转 - bg 当前页面背景。 1. 优先查找使用resource中的资源 2. 判断当前背景是否为图片 xxx.jpg 或者 url(xxx.jpg) 3. 直接使用background属性填充图片区域 (#ccc => background:#ccc) - enter 进场效果 - leave 出场效果 **事件** - rotate - pinch - swipe（包含方向信息 up,down,left,right，如swipeLeft） - tap - doubleTap - longTap - singleTap - pressmove **示例** ```html <Page name="scene1" :enter="enterEffect" :leave="leaveEffect" @swipeUp="nextPage('scene2')" bg="backgroundtest"> </Page> ``` ## 指令 ### v-finger 定义某个组件的扩展事件 **示例** ```html <imager layer="startbtn" v-finger:pinch="onPinch"></imager> <imager layer="startbtn" v-finger:swipe.page1="doSomeThing"></imager> ```