微信小程序弹出和隐藏遮罩层动画以及五星评分

内容预览:
  • 参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=8...~
  • var animation = wx.createAnimation({ duration: 500, //动画持续时间5...~
  • animationData: animation.export(), showModalStatus: true //显示遮罩...~

参考源码:

http://www.see-source.com/weixinwidget/detail.html?wid=82

https://blog.csdn.net/pcaxb/article/details/56276180

https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html

train.wxml

<view class='train_con'>

<view class='head'>
<text>{}</text>
<text class='count'>{}/{}</text>
</view>

<view bindtouchstart="touchStart" bindtouchend="touchEnd" style='width:100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;'>

<view class='question_view'>
<text class='question_text'>{}</text>

<view class='option_view' data-id="A" bindtap="changeColor">

<view class="letter_view {} {}">
<text class='letter'>A</text>
</view>

<view class='option_text_view' >
<text class='option_text'>{}</text>
</view>
</view>

<view class='option_view' data-id='B' bindtap="changeColor">

<view class="letter_view {} {}">
<text class='letter'>B</text>
</view>

<view class='option_text_view'>
<text class='option_text'>{}</text>
</view>
</view>

<view class='option_view' data-id='C' bindtap="changeColor">
<view class="letter_view {} {}">
<text class='letter'>C</text>
</view>

<view class='option_text_view'>
<text class='option_text'>{}</text>
</view>
</view>

<view class='option_view' data-id='D' bindtap="changeColor">
<view class="letter_view {} {}">
<text class='letter'>D</text>
</view>

<view class='option_text_view'>
<text class='option_text'>{}</text>
</view>
</view>

</view>
<!-- 答案解析 -->
<view>
<view class="analysis_view {}">
<text>参考答案:{}n参考解析:{}</text>
</view>
</view>


<view class="checkanswer_view {}" bindtap='checkanswer_click'>
<text>查看答案</text>
</view>
</view>

<!-- 透明遮盖层,用于退出评分层 -->
<view bindtap="hideModal" animation="{}" class="touming_top" wx:if="{}">
</view>

<!-- 评分遮盖层 -->
<view animation="{}" class="container-column buydes-dialog-container" wx:if="{}">
<view class="buydes-dialog-container-top">这道题对你有用吗?评个分吧</view>
<view class="container-column buydes-dialog-container-bottom">
<!-- 评分 -->
<block wx:for="{}">
<image class="star-image" style="left: {}rpx" src="{}">
<view class="item" style="left:0rpx" data-key="{}" bindtap="selectRight"></view>
</image>
</block>
<view class="mark_btn" bindtap='mark_click'>
<text>确定</text>
</view>
</view>
</view>

<!-- 透明遮盖层,用于退出评分层 -->
<view bindtap="hideModal" animation="{}" class="touming" wx:if="{}">
</view>

<!-- 底部栏 -->
<view class='leftandright'>

<view class='bottom_view' bindtap="showModal" >
<image class="bottom_image" src='../images/score.png'></image>
</view>

<view class='bottom_view' bindtap='nextquestion_click'>
<image class="bottom_image" src='../images/comment.png'></image>
</view>

<button style="color: #fff; width: 80rpx;height: 80rpx;background-color: #fff;padding:0rpx; margin-left:0rpx;margin-right:0rpx;padding-left:0px;padding-right:0px;" id="shareBtn" open-type="share" class='share_btn'>
<image class="bottom_image" src='../images/share.png'></image>
</button>

</view>


</view>

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 + "分")
this.setData({
key: key
})
},

// 确定评分
mark_click: function () {
this.hideModal()
},

// 显示遮罩层
showModal: function () {
//创建一个动画实例animation。调用实例的方法来描述动画。
var animation = wx.createAnimation({
duration:
500, //动画持续时间500ms
timingFunction: "ease",//动画以低速开始,然后加快,在结束前变慢
delay: 0 //动画延迟时间0ms
})
this.animation = animation
//调用动画操作方法后要调用 step() 来表示一组动画完成
animation.translateY(animationShowHeight).step()// 在Y轴向上偏移300
this.setData({
//通过动画实例的export方法导出动画数据传递给组件的animation属性。
animationData: animation.export(),
showModalStatus:
true //显示遮罩层
})
setTimeout(
function () {
animation.translateY(
0).step()
this.setData({
animationData: animation.export()
})
}.bind(
this), 1)
},

// 隐藏遮罩层
hideModal: function () {
var animation = wx.createAnimation({
duration:
500,
timingFunction:
"ease",
delay:
0
})
this.animation = animation;
animation.translateY(animationShowHeight).step()
this.setData({
animationData: animation.export(),
})
setTimeout(
function () {
animation.translateY(
0).step()
this.setData({
animationData: animation.export(),
showModalStatus:
false
})
}.bind(
this), 200)
},

// 评分按钮
score_click: function () {

},


/**
* 生命周期函数--监听页面加载
*/
onLoad:
function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow:
function () {
flag_hd
= true; //重新进入页面之后,可以再次执行滑动切换页面代码
clearInterval(interval); // 清除setInterval
time = 0;
let that
= this;
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;
}

 

以上就是:微信小程序弹出和隐藏遮罩层动画以及五星评分 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


系统运维
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论