pp电子

登录
免费开通
产品中心
更多服务

微信小程序弹出和隐藏遮罩层动画

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2020/9/27 0:00:00 泉源：不详 作者：未知

微信弹出和隐藏遮罩层动画是小程序开发中很是主要的手艺，，下面为各人介绍怎样实现及开发？？

微信小程序弹出和隐藏遮罩层动画

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 = "";//周期执行函数的工具
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;
}
 

微信小程序弹出和隐藏遮罩层动画


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，由于未联系到知识产权人或未发明有关知识产权的挂号，，若有知识产权人并不肯意我们使用，，若是有侵权请连忙联系。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，仅系客观性形貌，，如您需要相识该类商品/服务详细的资讯，，请您直接与该类商品/服务的提供者联系。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。

KESION 一直通过手艺立异，，提供产品和服务，，助力企业向数字化转型，，通过科技驱动商业刷新，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 微信小程序开发WXML 模板,微信小程序数据绑定

    从事过网页编程的人知道，，网页编程接纳的是 HTML + CSS + JS 这样的组合，，其中 HTML 是用来形貌目今这个页面的结构，，CSS 用来形貌页面的样子，，JS 通常是用来处理这个页面和用户的交互

    微信小程序开发微信小程序SaaS 2020/9/27 0:00:00

  • 微信小程序开发工具注重点,微信小程序运行端

    javascript wxss 微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。。。。 三端的剧本执行情形聚以及用于渲染非原生组件的情形是各不相同的： 在 iOS 上，，小程序的 ja

    微信小程序开发微信小程序SaaS 2020/9/27 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序弹出和隐藏遮罩层动画 - KESION pp电子