微信小程序彈出和隱藏遮罩層動畫以及五星評分
阿新 • • 發佈：2018-05-07
weixin cli pan ppm for 數組 HA 分層 ref
參考源碼：
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> <textclass=‘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‘> <textclass=‘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 = "";//周期執行函數的對象 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; }
微信小程序彈出和隱藏遮罩層動畫以及五星評分