微信小程序page样式有哪些？

　　小程序page的开发涉及到很多方面，与之对应的样式也有很多种，接下来小编会讲解微信小程序page样式的具体表现形式以及开发步骤，一起来看看吧。

　　首页分为四个文件组成，如下图所示，具体的页面功能，上面已说过。

　　下面来看下，index.wxml效果

　　最上面的“来运吧”标题，在index.json文件下定义的，每个文件都可以用不同的.json来定义，当然代码也可以动态改变它

　　很简单吧，标题就这么简单的出现了。

　　1)接下来看看微信小程序滚动的banner,

　　index.wxml这样来描述

　　那么swiper是什么东东呢?微信小程序帮助文档这样说明的 swiper滑块视图容器

　　属*名类型默认值说明

　　indicator-dotsBooleanfalse是否显示面板指示点

　　autoplayBooleanfalse是否自动切换

　　currentNumber0当前所在页面的 index

　　intervalNumber5000自动切换时间间隔

　　durationNumber500滑动动画时长

　　circularBooleanfalse是否采用衔接滑动

　　bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current}

　　注意：其中只可放置组件，其他节点会被自动删除。

　　swiper-item

　　仅可放置在组件中，宽高自动设置为100%。

　　示例代码：

　　?

　　indicator-dotsautoplay interval durationPage({ data: { imgUrls: [ 'img02.tooopen/images/20150928/tooopen_sy_143912755726.jpg', 'img06.tooopen/images/20160818/tooopen_sy_175866434296.jpg', 'img06.tooopen/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) }})

　　看了上面的官方文档，就可以清楚的知道，这个就是我们类似在写html里用到的banner滑动插件一样，拿过来就可以使用，多么的方便。

　　我们的项目中同样用参数绑定的方式，输出的相关参数

　　参数定义在index.js pages({...})方法中

　　为什么要绑定参数?为什么不直接写入参数呢?好处太多，图片我们不可能写死，从服务器请求图片，同时可以方便的控制我们的相关参数来改变swiper的行为等。

　　至于参数绑定，官网说的也很清楚，这里不在解释。

　　2)城市选择及切换

　　这块看起来很简单，实际上很麻烦，如果对动画不熟悉的朋友，可以会苦恼一番的。

　　上面的动画很流畅，可能是因为抓屏工具不太好，这点大可不用关心。

　　我们点击中间的“交换圆”的时候，”出发城市“与”到达城市“相互交换，他们不是立即变化，而是中间有一个"位移"效果，同时，那个“交换的圆”也要旋转180度。

　　这样体验感立马"高上大"。呵呵，不是吗?下面我们详细的来实现它。

　　我们首先来温习下，官网动画相关的文档说明

　　wx.createAnimation(OBJECT)

　　创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属*。

　　注意: export 方法每次调用后会清掉之前的动画操作

　　OBJECT参数说明：

　　参数类型必填说明

　　durationInteger否动画持续时间，单位ms，默认值 400

　　timingFunctionString否定义动画的效果，默认值"linear"，有效值："linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"

　　delayInteger否动画延迟时间，单位 ms，默认值 0

　　transformOriginString否设置transform-origin，默认为"50% 50% 0"

　　?

　　var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 1000, timingFunction: "ease", delay: 0})

　　animation

　　动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

　　样式：

　　方法参数说明

　　opacityvalue透明度，参数范围 0~1

　　backgroundColorcolor颜色值

　　widthlength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　heightlength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　toplength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　leftlength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　bottomlength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　rightlength长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

　　旋转：

　　方法参数说明

　　rotatedegdeg的范围-180~180，从原点顺时针旋转一个deg角度

　　rotateXdegdeg的范围-180~180，在X轴旋转一个deg角度

　　rotateYdegdeg的范围-180~180，在Y轴旋转一个deg角度

　　rotateZdegdeg的范围-180~180，在Z轴旋转一个deg角度

　　rotate3d(x,y,z,deg)同transform-function rotate3d

　　缩放：

　　方法参数说明

　　scalesx,[sy]一个参数时，表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数

　　scaleXsx在X轴缩放sx倍数

　　scaleYsy在Y轴缩放sy倍数

　　scaleZsz在Z轴缩放sy倍数

　　scale3d(sx,sy,sz)在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数

　　偏移：

　　方法参数说明

　　translatetx,[ty]一个参数时，表示在X轴偏移tx，单位px;两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。

　　translateXtx在X轴偏移tx，单位px

　　translateYty在Y轴偏移tx，单位px

　　translateZtz在Z轴偏移tx，单位px

　　translate3d(tx,ty,tz)在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px

　　倾斜：

　　方法参数说明

　　skewax,[ay]参数范围-180~180;一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度;两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度

　　skewXax参数范围-180~180;Y轴坐标不变，X轴坐标延顺时针倾斜ax度

　　skewYay参数范围-180~180;X轴坐标不变，Y轴坐标延顺时针倾斜ay度

　　矩阵变形：

　　方法参数说明

　　matrix(a,b,c,d,tx,ty)同transform-function matrix

　　matrix3d 同transform-function matrix3d

　　动画队列

　　调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。

　　示例：

　　?

　　Page({ data: { animationData: {} }, onShow: function(){ var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', })

　　this.animation = animation

　　animation.scale(2,2).rotate(45).step()

　　this.setData({ animationData:animation.export() })

　　setTimeout(function() { animation.translate(30).step() this.setData({ animationData:animation.export() }) }.bind(this), 1000) }, rotateAndScale: function () { // 旋转同时放大 this.animation.rotate(45).scale(2, 2).step() this.setData({ animationData: this.animation.export() }) }, rotateThenScale: function () { // 先旋转后放大 this.animation.rotate(45).step() this.animation.scale(2, 2).step() this.setData({ animationData: this.animation.export() }) }, rotateAndScaleThenTranslate: function () { // 先旋转同时放大，然后平移 this.animation.rotate(45).scale(2, 2).step() this.animation.translate(100, 100).step({ duration: 1000 }) this.setData({ animationData: this.animation.export() }) }})

　　微信小程序page样式的表现形式小编分别都给出了参考，操作步骤和实现效果也都在文中展示出来了，更多相关资料请在微信小程序商店进行搜索。

　　微信小程序获取page怎么弄

　　如何使用微信小程序page方法?

　　微信小程序滑动事件，微信小程序page详解