微信小程序彈出和隱藏遮罩層動畫以及五星評分
發(fā)布時間：2018-05-09 15:44 所屬欄目：小程序開發(fā)教程
參考源碼：
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>{{bankname}}</text>
<text class='count'>{{index+1}}/{{allquestion.length}}</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'>{{questionlist.question}}</text>
<view class='option_view' data-id="A" bindtap="changeColor">
<view class="letter_view {{letterid=='A'?'active':''}} {{errorid=='A'?'error':''}}">
<text class='letter'>A</text>
</view>
<view class='option_text_view' >
<text class='option_text'>{{questionlist.choiceA}}</text>
</view>
</view>
<view class='option_view' data-id='B' bindtap="changeColor">
<view class="letter_view {{letterid=='B'?'active':''}} {{errorid=='B'?'error':''}}">
<text class='letter'>B</text>
</view>
<view class='option_text_view'>
<text class='option_text'>{{questionlist.choiceB}}</text>
</view>
</view>
<view class='option_view' data-id='C' bindtap="changeColor">
<view class="letter_view {{letterid=='C'?'active':''}} {{errorid=='C'?'error':''}}">
<text class='letter'>C</text>
</view>
<view class='option_text_view'>
<text class='option_text'>{{questionlist.choiceC}}</text>
</view>
</view>
<view class='option_view' data-id='D' bindtap="changeColor">
<view class="letter_view {{letterid=='D'?'active':''}} {{errorid=='D'?'error':''}}">
<text class='letter'>D</text>
</view>
<view class='option_text_view'>
<text class='option_text'>{{questionlist.choiceD}}</text>
</view>
</view>
</view>
<!-- 答案解析 -->
<view>
<view class="analysis_view {{clickcheckid==1?'checked2':''}}">
<text>參考答案：{{questionlist.answer}}\n參考解析：{{questionlist.analysis}}</text>
</view>
</view>
<view class="checkanswer_view {{clickcheckid==1?'checked':''}}" bindtap='checkanswer_click'>
<text>查看答案</text>
</view>
</view>
<!-- 透明遮蓋層，用于退出評分層 -->
<view bindtap="hideModal" animation="{{animationData}}" class="touming_top" wx:if="{{showModalStatus}}">
</view>
<!-- 評分遮蓋層 -->
<view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">
<view class="buydes-dialog-container-top">這道題對你有用嗎？評個分吧</view>
<view class="container-column buydes-dialog-container-bottom">
<!-- 評分 -->
<block wx:for="{{stars}}">
<image class="star-image" style="left: {{item*80+185}}rpx" src="{{key > item ?selectedSrc : normalSrc}}">
<view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
</image>
</block>
<view class="mark_btn" bindtap='mark_click'>
<text>確定</text>
</view>
</view>
</view>
<!-- 透明遮蓋層，用于退出評分層 -->
<view bindtap="hideModal" animation="{{animationData}}" class="touming" wx:if="{{showModalStatus}}">
</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 = "";//周期執(zhí)行函數(shù)的對象
var time = 0;//滑動時間
var touchDot = 0;//觸摸時的原點
var flag_hd = true;//判定是否可以滑動
let animationShowHeight = 300;//動畫偏移高度
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
// 遮罩層變量
animationData: "",
showModalStatus: false,
imageHeight: 0,
imageWidth: 0,
// 評分變量
stars: [0, 1, 2, 3, 4],//評分數(shù)值數(shù)組
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 () {
//創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。
var animation = wx.createAnimation({
duration: 500, //動畫持續(xù)時間500ms
timingFunction: "ease",//動畫以低速開始，然后加快，在結(jié)束前變慢
delay: 0 //動畫延遲時間0ms
})
this.animation = animation
//調(diào)用動畫操作方法后要調(diào)用 step() 來表示一組動畫完成
animation.translateY(animationShowHeight).step()// 在Y軸向上偏移300
this.setData({
//通過動畫實例的export方法導出動畫數(shù)據(jù)傳遞給組件的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 () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
flag_hd = true; //重新進入頁面之后，可以再次執(zhí)行滑動切換頁面代碼
clearInterval(interval); // 清除setInterval
time = 0;
let that = this;
wx.getSystemInfo({
success: function (res) {
animationShowHeight = res.windowHeight;
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
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";
}
/* 觸發(fā)評分點擊的區(qū)域 */
.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;
}
