微信小程序旋转大师的代码是什么

微信小程序旋转大师的代码是什么,第1张

data: {

class1: 'z1', //默认正行弯带面在上面

class2: 'z2'

},

rotateFn: function(e) {

let data = this.data

if (data.class1 == 'z1' &&data.class2 == 'z2') {

this.run('front', 'back', 'z2', 'z1')

} else {

this.run('back', 'front'档芦, 'z1', 'z2')

}

},

run: function(a, b, c, d) {

let that = this

that.setData({

class1: a,

class2: b,

})

setTimeout(function() {

that.setData({

class1: c,

class2: d,

})

}, 1000)

},

还有样闹羡式:

page{position: relativeheight: 100%background-color: #F6F6F6}

.rotateCtn{position: absolutewidth: 70%height: 70%left: 15%bottom: 20%transform-style:preserve-3d}

.frame{position: absoluteheight: 100%width: 100%}

.frame image{height: 100%width: 100%border-radius: 8px}

.front{animation:front 1s linear 1backface-visibility: hidden}

.back{animation:back 1s linear 1}

@keyframes front{from{transform: rotateY(0deg)} to{transform: rotateY(180deg)}}

@keyframes back{from{transform: rotateY(-180deg)} to{transform: rotateY(0deg)}}

.z1{z-index:6}

.z2{z-index:5}

一个很常用的功能,但是我还是发现有一些需要注意的地方在里面,简单记录一下。

第一个问题就是这个 button 组件需要添加 open-type 属性,并指定为 getUserInfo 类型,来获取用户基本高首信息。还有另外一种做法,具体可以参考 官方文档的说明 。

放一个动图哈哈哈

js 部分就是响应点击事件,使用 api wx.getUserInfo(Object object)

获取用户信息,注意传递给 wx.getUserInfo 的是一个字典其中碰念洞包含了两个函数分别作为成功和失败的回调函数(callback function)

注意 this 的指代对象发生了变化,最开始的this是指代 Page() 构造出来的对象,在函数里面使用 this 会说未指定,所以我们使用了 that 承接一下,这也算传统艺能咯。

另外一点:获取用户信息时会自动d出一个对话框问用户是否提供信笑枯息,这个d窗只d出一次,如果用户点击了拒绝后来又想改为允许,可以使用 wx.openSetting({})

除了可以获取用户的昵称之外还有很多信息可以得到,还有一个比较常用的就是用户头像了也就是 res.userInfoavatarUrl 。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12358981.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存