欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序弹出和隐藏遮罩层动画以及五星评分

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:501

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

发布时间:2020-10-24  

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

参考源码:
?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=http://www.yiyongtong.com/archives/"{{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