小程序模板网

微信小程序实现点击图片旋转180度并且弹出下拉列表

实现点击图片旋转180度并且弹出下拉列表

 
 
 
 

//index.wxml

 

			
  1. <view class="phone_one" bindtap="clickPerson">
  2. <view class="phone_personal">{{firstPerson}}</view>
  3. <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判断图片要不要旋转180。
  4. </view>
  5.  
  6. <view class="person_box">
  7. <view class="phone_select" hidden="{{selectPerson}}">
  8. <view bindtap="mySelect">测试1</view>
  9. <view bindtap="mySelect">测试2</view>
  10. <view bindtap="mySelect">测试3</view>
  11. </view>
  12. </view>

//index.js

 

			
  1. <pre name="code" class="html">Page({
  2. data:{
  3. selectPerson:true,
  4. firstPerson:'个人',
  5. selectArea:false,
  6. },
  7. //点击选择类型
  8. clickPerson:function(){
  9. var selectPerson = this.data.selectPerson;
  10. if(selectPerson == true){
  11. this.setData({
  12. selectArea:true,
  13. selectPerson:false,
  14. })
  15. }else{
  16. this.setData({
  17. selectArea:false,
  18. selectPerson:true,
  19. })
  20. }
  21. } ,
  22. //点击切换
  23. mySelect:function(e){
  24. this.setData({
  25. firstPerson:e.target.dataset.me,
  26. selectPerson:true,
  27. selectArea:false,
  28. })
  29. },
  30. }}</pre><pre name="code" class="html"></pre>//index.wxss
  31. [html] view plain copy
  32. <pre name="code" class="html">.phone_personal{
  33. width: 100%;
  34. color:rgb(34, 154, 181);
  35. height:100rpx;
  36. line-height:100rpx;
  37. text-align: center;
  38. }
  39. .phone_one{
  40. display: flex; //用flex布局更方便。
  41. position: relative;
  42. justify-content: space-between;
  43. background-color:rgb(239, 239, 239);
  44. width:90%;
  45. height:100rpx;
  46. margin:0 auto;
  47. border-radius: 10rpx;
  48. border-bottom:2rpx solid rgb(255, 255, 255);
  49. }
  50. .person_box{
  51. position: relative;
  52. }
  53. .phone_select{
  54. margin-top:0;
  55. z-index: 100;
  56. position: absolute; //小程序中z-index和absolute需要同时存在,元素才能脱离文档。
  57. }
  58. .select_one{
  59. text-align: center;
  60. background-color:rgb(239, 239, 239);
  61. width:676rpx; //脱离文档后元素width不能再用百分比。
  62. height:100rpx;
  63. line-height:100rpx;
  64. margin:0 5%;
  65. border-bottom:2rpx solid rgb(255, 255, 255);
  66. }
  67. .personal_image{
  68. z-index: 100;
  69. position: absolute;
  70. right:2.5%;
  71. width: 34rpx;
  72. height: 20rpx;
  73. margin:40rpx 20rpx 40rpx 0;
  74. transition: All 0.4s ease;
  75. -webkit-transition: All 0.4s ease;
  76. }
  77. .rotateRight{
  78. transform: rotate(180deg); //180°旋转图片。
  79. }</pre>
  80. <p></p><pre name="code" class="html" style="font-size: 13.3333px;"></pre><p></p>
  81. <pre></pre>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18334.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询