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}
微信小程序开发中toast也是重要的消息提示方式.提示框:
wx.showToast(OBJECT)
显示消息提示框
OBJECT参数说明:
示例代码:
?
12345
wx.showToast({ title:'成功', icon:'success', duration: 2000})
wx.hideToast()
隐藏消息提示框
?
123456789
wx.showToast({ title:'加载中', icon:'迟拍旦loading', duration: 10000}) setTimeout(function(){ wx.hideToast()},2000)
wx.showModal(OBJECT)
显示模态d窗
OBJECT参数说明:
示例代码:
?
123456789
wx.showModal({ title:'提示', content:'这是一个模态d窗', success:function(res) { if(res.confirm) { console.log('用户点击确定') } }})
wx.showActionSheet(OBJECT)
显示 *** 作菜单
OBJECT参数说明:
success返回参数说明:
示例代码:
?
12345678
wx.showActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!res.cancel) { console.log(res.tapIndex) } }})
设置导航条
<view>提示:{{tip}}</view>
<button type="default" bindtap="showModal">点击我d出modal对话框</button>
<view>
<modal title="modal对话框贺灶"码扰 hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"
bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal对话框</modal>
</view>
Page({
data:{
// text:"这是一个页面"
tip:'',
buttonDisabled:false,
modalHidden:true,
show:false
},
showModal:function(){
this.setData({
modalHidden:!this.data.modalHidden
})
},
modalBindaconfirm:function(){
this.setData({
modalHidden:!this.data.modalHidden,
show:!this.data.show,
tip:'您点击了【确认】按钮!',
buttonDisabled:!this.data.buttonDisabled
})
},
modalBindcancel:function(){
this.setData({
modalHidden:!this.data.modalHidden,
tip:'您点击了【取消】按钮!'
})
}
})
wx.setNavigationBarTitle(OBJECT)
动态设置当前页面的标题。
OBJECT参数说明:
示例代码:
?
123
wx.setNavigationBarTitle({ title:'当前页面'})
wx.showNavigationBarLoading()
在当前页面显示导航条加载动画。
wx.hideNavigationBarLoading()
隐藏导航条加载动画。
页面跳转:
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
OBJECT参数说明:
示例代码:
?
123
wx.navigateTo({ url:'test?id=1'})
?
123456
//test.jsPage({ onLoad:function(option){ console.log(option.query) }})
注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明:
示例代码:
?
123
wx.redirectTo({ url:'test?id=1'})
wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:
动画:
wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
注意: export 方法每次调用后会清掉之前的动画 *** 作
OBJECT参数说明:
?
123456
var animation = wx.createAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})
animation
动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。
样式:
旋转:
缩放:
偏移:
倾斜:
矩阵变形:
动画队列
调用动画 *** 作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
示例:
?
1
<viewanimation="{{animationData}}"style="background:redheight:100rpxwidth:100rpx"></view>
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
Page({ data: { animationData: {} }, onShow:function(){ varanimation = 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() }) }})
wx.hideKeyboard()
收起键盘。
写小程序时候,经常遇到使用下拉框选项,不过每次都手写很麻烦,所有我就发一个例子吧,因为我包在其他模块中,所有样式不知道有没有复制全,大家见谅!
·
每一个值的高度等你们可以随意设置,看个人喜好。
这个原理很简单,首先准备一些标签,准备一张图片(展开与折叠用),数据绑定就不说了。
设置变量:selectShow, 控制下拉框列表是否显示隐藏,我设置的是高度,显示就设置高度,不显示就设置为0; index,设置显示第几个数据,默认可以设置为0,根据需求; selectData,你要选择的数据组[];
当点击三角时候,设置下拉框option选项显示(高度)。当点击选项值的时卜竖则候,设置全局变量的下标值,标签中会根据下标在数组中选中,绑定数据显示, 然后设置下拉框option选项不显示(高度0)。
option总高度设置,根据你有多少选项以及selectShow值是否显示,我设置的是小于5个时候默认高度325rpx,超过五个时候,选项组length 每一个50rpx,
height:{{selectShow?(selectData.length>5?325:selectData.length 50):0}}rpx
这个是写的一个样式,我的图片是倒三角,当展开时候型棚,添加一个样式,rotate180度。
class='select_img {{selectShow&&"select_img_rotate"}}' src='../../images/b2.png'
这个是我的选项内容是一组数组,所有我循环出来,顺便绑定一个数纤雀据到标签中data-index,也就是这个值在数组中的下标,点击时候获取方便用。然后添加一个事件catchtap='optionTap'。
wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'
wxss样式:
不解释,,看设计需求写样式。不过大多通用。
写程序时候,很多地方会用到时间选项,送大家一个函数。获取一天时间分割数组。["00:00","00:05","00:10"....]参数minute ,设置隔几分钟分割。时间格式你们可以自己改。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)