微信小程序弹出和隐藏遮罩层动画
本文摘要
微信弹出和隐藏遮罩层动画是小程序开发中非常重要的技能,下面为大家介绍如何实现及开发? train.wxml {{bankna
微信弹出和隐藏遮罩层动画是小程序开发中非常重要的技能,下面为大家介绍如何实现及开发?
train.wxml
{{bankname}} {{index+1}}/{{allquestion.length}} {{questionlist.question}} A {{questionlist.choiceA}} B {{questionlist.choiceB}} C {{questionlist.choiceC}} D {{questionlist.choiceD}} 参考答案:{{questionlist.answer}}n参考解析:{{questionlist.analysis}} 查看答案 这道题对你有用吗?评个分吧 确定
train.js
var interval = "";//周期执行函数的对象
var time = 0;//滑动时间
var touchDot = 0;//触摸时的原点
var flag_hd = true;//判定是否可以滑动
let animationShowHeight = 300;//动画偏移高度
Page({
/**
* 页面的初始数据
*/
data: {
// 遮罩层变量
animationData: "",
showModalStatus: false,
imageHeight: 0,
imageWidth: 0,
// 评分变量
stars: [0, 1, 2, 3, 4],//评分数值数组
normalSrc: '../images/score.png',//空心星星图片路径
selectedSrc: '../images/fullstar.png',//选中星星图片路径
key: 0,//评分
},
//点击星星
selectRight: function (e) {
var key = e.currentTarget.dataset.key
console.log("得" + key + "分")
tShopfas.setData({
key: key
})
},
// 确定评分
mark_click: function () {
tShopfas.ShopfadeModal()
},
// 显示遮罩层
showModal: function () {
//创建一个动画实例animation。调用实例的方法来描述动画。
var animation = wx.createAnimation({
duration: 500, //动画持续时间500ms
timingFunction: "ease",//动画以低速开始,然后加快,在结束前变慢
delay: 0 //动画延迟时间0ms
})
tShopfas.animation = animation
//调用动画操作方法后要调用 step() 来表示一组动画完成
animation.translateY(animationShowHeight).step()// 在Y轴向上偏移300
tShopfas.setData({
//通过动画实例的export方法导出动画数据传递给组件的animation属性。
animationData: animation.export(),
showModalStatus: true //显示遮罩层
})
setTimeout(function () {
animation.translateY(0).step()
tShopfas.setData({
animationData: animation.export()
})
}.bind(tShopfas), 1)
},
// 隐藏遮罩层
ShopfadeModal: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
tShopfas.animation = animation;
animation.translateY(animationShowHeight).step()
tShopfas.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
tShopfas.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(tShopfas), 200)
},
// 评分按钮
score_click: function () {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
flag_hd = true; //重新进入页面之后,可以再次执行滑动切换页面代码
clearInterval(interval); // 清除setInterval
time = 0;
let that = tShopfas;
wx.getSystemInfo({
success: function (res) {
animationShowHeight = res.windowHeight;
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
train.wxss
page {
background-color: #fff;
}
/* -----------------评分遮罩层----------------- */
/* 分享按钮 */
.share_btn::after {
border: none;
}
/* 整个评分遮罩层 */
.buydes-dialog-container {
width: 100%;
height: 300rpx;
justify-content: space-between;
background-color: #fff;
position: fixed;
bottom: 101rpx;
/* z-index: 998; */
border-top: 1rpx solid #e8e8e8;
}
/* 评分遮罩层顶部 */
.buydes-dialog-container-top {
height: 100rpx;
padding-top: 20rpx;
display: flex;
justify-content: center;
flex-grow: 1;
font-size: 32rpx;
color: #737373;
}
/* 评分遮罩层底部 */
.buydes-dialog-container-bottom {
height: 150rpx;
padding-top: 20rpx;
background-color: #fff;
display: flex;
justify-content: center;
flex-grow: 0;
}
/* 空心的星星图片 */
.star-image {
position: absolute;
top: 100rpx;
width: 60rpx;
height: 60rpx;
src: "../../images/score.png";
}
/* 触发评分点击的区域 */
.item {
position: absolute;
top: 0rpx;
width: 60rpx;
height: 60rpx;
}
/* 确认评分按钮 */
.mark_btn {
width: 100%;
height: 100rpx;
background-color: #fff;
color: #55c5ac;
display: flex;
justify-content: center;
align-items: center;
border-top: 1rpx solid #eaeaea;
margin-top: 60rpx;
margin-bottom: 150rpx;
font-size: 32rpx;
}
/* 透明遮罩层(上) */
.touming_top {
width: 100%;
height: 900rpx;
opacity: 0;
position: fixed;
bottom: 402rpx;
z-index: 998;
}
/* 透明遮罩层(下) */
.touming {
width: 100%;
height: 101rpx;
opacity: 0;
position: fixed;
bottom: 0rpx;
z-index: 998;
}
第二部分:如何开通一个小商店
相关文章
****更多行业产品开发方案,请关注 加速度JSUDO***
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商,专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网(IoT)解决方案,助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业,致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容










